Autocomplete with API calls

millii19 commented 3 years ago

Is your feature request related to a problem?

I'd like to make an API call with the search-input and display the result as choices. Similar to how search-bars work with autocomplete on websites

Describe the solution you'd like

I'd like for Autocomplete to support accepting a function for the 'choices' property. The signature could be something like the following: (answers, input) => Promise<{title: string, value: any}>

Describe alternatives you've considered

I've tried using the suggest property, but that didn't work. I've also tried inquirer and enquirer each with their own plugin that supports something like this. It feels clunky and I've only got it to work with inquirer. (With the enquirer plugin I had issues with typescript)

Additional context

If you think this would be something nice, I can try to give it a shot.

elliot-nelson commented 3 years ago

The suggest function of the autocomplete input does support promises, what issue did you run into?

If you have no choices at all (you won't know until the user starts typing / you'll always get them from the server), you can cheat a little bit -- just provide a choices value that is a list as long as the max number of choices you could have. The values don't matter because they'll be ignored, in favor of the suggest function.

Example:

async function getAirport() {
    return await prompts({
        type: 'autocomplete',
        name: 'airport',
        message: 'Pick destination:',
        choices: ['loading...', '', '', '', '', '', ''],
        suggest: async (input, choices) => {
            const results = await retrieveRemoteAirports(input);
            return results.map(r => ({ title: r.name, value: r.code }));
        }
    });
}

If you want to do custom sorting in your suggest function (and not just filtering), that also will hit a bit of a snag due to the way an autocomplete element normally works -- you could try my approach in https://github.com/terkelg/prompts/issues/285#issuecomment-733142370 to fix that if desired.

millii19 commented 3 years ago

@elliot-nelson Thanks for the quick response, sorry I didn't respond earlier.

Thank you, my problem was that I didn't prefill the choices array.

I highly recommend addressing this use-case in the docs, as the use of the suggest function is not extensively documented and that choices needs to be filled with empty elements.

OleksandrKucherenko commented 11 months ago

https://gist.github.com/OleksandrKucherenko/3a79b315bf284c0eb1ca9fc7ab9f546e

terkelg / prompts