inquirer-autocomplete-standalone

inquirer-autocomplete-standalone

Standalone autocomplete prompt for the CLI based on inquirer core.

Allows you do do show dynamic choices in a list based on user input, both synchronous or asynchronous allowing you to connect to an external service.

Installation

npm install inquirer-autocomplete-standalone

This is a native ES module package. If you are using it with commonjs you need to import it like this:

async function main() {
  const { default: autocomplete, Separator } = await import(
    'inquirer-autocomplete-standalone'
  );
  const answer = await autocomplete({});
}

main();

If you are using it with typescript see here for examples of how to use it if emitting commonjs or esm from your typescript.

If you want the legacy version used with inquirer version 9 and below then that is located here and can be installed with:

npm install inquirer-autocomplete-prompt

That version will still be maintained for bugs and other issues, but is not the recommended way to use this prompt. This is following the change that Inquirer itself chose. Now the preferred way is to have standalone prompts that you can pick and choose from.

Demo

Run a quick demo locally with

npx inquirer-autocomplete-demo

Usage

import autocomplete from 'inquirer-autocomplete-standalone';
import { searchCountries } = './some-external-api';

const answer = await autocomplete({
  message: 'Travel from what country?',
  source: async (input) => {
    const filteredCountries = await searchCountries(input)
    return filteredCountries.map(country => {
      return {
        value: country,
        description: `${country} is a great place to visit`
      }
    })
  }
})

// user searches and selects a country from the returned list
console.log(answer) // Norway

Options

The generic type Value is whatever type the value of your choices are.

Property	Type	Required	Description
message	string	yes	The question to ask
source	(input?: string) => Promise<Choice<Value> | Separator> | Choice<Value> | Separator	yes	A function that will be called first once with undefined at the start. Then later with whatever value the user has typed. See table below for full description of the Choice<Value> type. Can also return choices synchronous.
transformer	(string, { isFinal: boolean }) => string	no	Transform/Format the raw value entered by the user. Once the prompt is completed, isFinal will be true. This function is purely visual, modify the answer in your code if needed.
validate	(value: Value) => boolean | string | Promise<string | boolean>	no	On submit, validate the filtered answered content. When returning a string, it'll be used as the error message displayed to the user. Note: returning a rejected promise, we'll assume a code error happened and crash.
default	string	no	If suggestOnly is true: will select that value if pressing enter and no input. If false: will select the choice with this value in the list when source resolves.
emptyText	string	no	The text shown if the source function returns no results. Default: No results...
pageSize	number	no	By default, lists of choice longer than 7 will be paginated. Use this option to control how many choices will appear on the screen at once.
searchText	string	no	The text shown when the promise is pending. Default: Searching...
suggestOnly	boolean	no	Default false. If false you must select one of the supplied choices in the list. You select by pressing enter. If true, pressing enter will select any text currently entered, regardless if of what is selected in the list. To choose one of the choices in the list, press tab to make your input the value of that choice.

Choice type and description

type Choice<Value> = {
  value: Value;
  name?: string;
  description?: string;
  disabled?: boolean | string;
};

Property	Type	Required	Description
value	any	yes	The value that will be returned from the prompt when the question has been answered. Should be string if name is absent. If not it is stringified for display.
name	string	no	The text to display for the choice.
description	string	no	Any extra description to show below the list when that choice is selected.
disabled	boolean | string	no	Set to false to disable the choice for selection and to a string to disable it but with a custom text.

Separator

You can also render any Separator to group choices.

import autocomplete, { Separator } from 'inquirer-autocomplete-standalone';

const answer = await autocomplete({
  message: 'Travel from what country?',
  source: async (input) => {
    return [
      new Separator('Africa'),
      new Separator(),
      {
        value: 'Egypt',
      },
      new Separator('Europe'),
      new Separator(),
      {
        value: 'Norway',
      },
    ];
  },
});

? Travel from what country? (Use arrow keys or type to search)
 Africa
 ──────────────
❯ Egypt
 Europe
 ──────────────
  Norway

Credits

Martin Hansen

License

ISC