Sapphire - Imagine a framework•3w ago

Slash command autocompletion dynamic input options

I'm looking around the DiscordJS documentation and SapphireJS docs to see if there might be a way to add the ability to, essentially, have a user type a slash command like: /play input:<search terms> And when they are inputting the search terms, have options populate above like how some music bots do. If anyone could point me in the right direction I'd greatly appreciate it. Doing my best to figure it out on my own. Thanks.

Solution:

Command#autocompleteRun can be async, which means you can execute a fetch HTTP request to retrieve the results and show them back to the user.

Jump to solution

4 Replies

Doc KerOP•3w ago

To be clear, the options populated won't be pre-defined, they'll be populated based on the results from the response from a fetch HTTP request

kyra•2d ago

Sorry for the delay, I don't know if you got it yet, but either way~ @Doc Ker

Solution

kyra•2d ago

Command#autocompleteRun can be async, which means you can execute a fetch HTTP request to retrieve the results and show them back to the user.

Doc KerOP•2d ago

Yeah I ended up figuring out I appreciate the reply though! My confusion was because I didn't realize there was an autocompleteRun function, I'll post the code for it here in case anyone wants to see how it's done

    public override async autocompleteRun(interaction: AutocompleteInteraction) {
        const focusedOption = interaction.options.getFocused(true);
        let choices: ApplicationCommandOptionChoiceData[] = [];

        if (focusedOption.name === 'query') {
            const query = focusedOption.value;

            if (typeof query === 'string' && query.length >= 3) {
                try {
                    const results = await play.search(query, {
                        limit: 8
                    });

                    choices =
                        results.map((video) => ({
                            name: `${video.title?.slice(0, 80) || 'Unknown Title'}... (${video.durationRaw || '??:??'})`,
                            value: video.url || query
                        })) || [];
                } catch (error) {
                    this.container.logger.error('Error searching YouTube:', error);
                    choices = [
                        {
                            name: 'Error searching YouTube',
                            value: query
                        }
                    ];
                }
            }
        }

        return interaction.respond(Array.isArray(choices) ? choices : []);
    }

    public override async autocompleteRun(interaction: AutocompleteInteraction) {
        const focusedOption = interaction.options.getFocused(true);
        let choices: ApplicationCommandOptionChoiceData[] = [];

        if (focusedOption.name === 'query') {
            const query = focusedOption.value;

            if (typeof query === 'string' && query.length >= 3) {
                try {
                    const results = await play.search(query, {
                        limit: 8
                    });

                    choices =
                        results.map((video) => ({
                            name: `${video.title?.slice(0, 80) || 'Unknown Title'}... (${video.durationRaw || '??:??'})`,
                            value: video.url || query
                        })) || [];
                } catch (error) {
                    this.container.logger.error('Error searching YouTube:', error);
                    choices = [
                        {
                            name: 'Error searching YouTube',
                            value: query
                        }
                    ];
                }
            }
        }

        return interaction.respond(Array.isArray(choices) ? choices : []);
    }

Gaming

Programming

Slash command autocompletion dynamic input options