Introduction to Inquirer Autocomplete Prompt

The inquirer-autocomplete-prompt is a popular extension of the Inquirer.js library. It provides an intuitive way for users to search and select from a list of options, offering auto-suggestions as they type. This guide covers its installation, setup, and a variety of useful API methods to help you create seamless, interactive CLI applications.

Installation

 
 npm install --save inquirer inquirer-autocomplete-prompt
 

Basic Usage

To start using inquirer-autocomplete-prompt, you need to register it with Inquirer:

 
const inquirer = require('inquirer');
const autocompletePrompt = require('inquirer-autocomplete-prompt');

inquirer.registerPrompt('autocomplete', autocompletePrompt);

inquirer
  .prompt([
    {
      type: 'autocomplete',
      name: 'fruit',
      message: 'What is your favorite fruit?',
      source: (answersSoFar, input) => {
        const fruits = ['Apple', 'Orange', 'Banana', 'Grapes'];
        input = input || '';
        return new Promise((resolve) => {
          resolve(fruits.filter(fruit => fruit.toLowerCase().includes(input.toLowerCase())));
        });
      },
    },
  ])
  .then(answers => {
    console.log('Your favorite fruit is:', answers.fruit);
  });
 

Advanced API Features

1. Page Size

You can adjust the number of suggestions displayed at once using the pageSize attribute:

 
inquirer
  .prompt([
    {
      type: 'autocomplete',
      name: 'fruit',
      message: 'What is your favorite fruit?',
      source: (answersSoFar, input) => {
        const fruits = ['Apple', 'Orange', 'Banana', 'Grapes', 'Pineapple', 'Strawberries'];
        input = input || '';
        return new Promise((resolve) => {
          resolve(fruits.filter(fruit => fruit.toLowerCase().includes(input.toLowerCase())));
        });
      },
      pageSize: 4
    },
  ])
  .then(answers => {
    console.log('Your favorite fruit is:', answers.fruit);
  });
 

2. Default Selection

Specify a default value for the prompt:

 
inquirer
  .prompt([
    {
      type: 'autocomplete',
      name: 'fruit',
      message: 'What is your favorite fruit?',
      source: (answersSoFar, input) => {
        const fruits = ['Apple', 'Orange', 'Banana', 'Grapes'];
        input = input || '';
        return new Promise((resolve) => {
          resolve(fruits.filter(fruit => fruit.toLowerCase().includes(input.toLowerCase())));
        });
      },
      default: 'Banana'
    },
  ])
  .then(answers => {
    console.log('Your favorite fruit is:', answers.fruit);
  });
 

Application Example

Here is an example of a complete CLI application that utilizes several of the advanced features:

 
const inquirer = require('inquirer');
const autocompletePrompt = require('inquirer-autocomplete-prompt');

inquirer.registerPrompt('autocomplete', autocompletePrompt);

const fruits = ['Apple', 'Orange', 'Banana', 'Grapes', 'Pineapple', 'Strawberries'];

function searchFruits(answersSoFar, input) {
  input = input || '';
  return new Promise((resolve) => {
    resolve(fruits.filter(fruit => fruit.toLowerCase().includes(input.toLowerCase())));
  });
}

inquirer
  .prompt([
    {
      type: 'autocomplete',
      name: 'favoriteFruit',
      message: 'What is your favorite fruit?',
      source: searchFruits,
      pageSize: 3,
      default: 'Apple'
    },
    {
      type: 'autocomplete',
      name: 'secondFavoriteFruit',
      message: 'What is your second favorite fruit?',
      source: searchFruits
    }
  ])
  .then(answers => {
    console.log('Your favorite fruits are:', answers.favoriteFruit, 'and', answers.secondFavoriteFruit);
  });
 

Conclusion

The inquirer-autocomplete-prompt package greatly enhances the user experience for CLI applications by providing real-time suggestions and easy navigation of options. By leveraging its advanced features, you can build user-friendly and efficient interactive prompts. Ensure you follow the best practices to make the most out of this powerful tool.

Happy coding!

Hash: 4fdebe8fc3d6d4f762485c5e88ecafd6a62a2ce5ca5f313de9209fbc48a819d1