Autocomplete

Creating autocomplete options

Imagine that you want to provide choices for a command option but in a dynamic way, for example a command to search for videos on YouTube. You can use the autocomplete option, so that based on what the user types in that option, you can search APIs and return a list of choices.

It's required have a slash command to create an autocomplete option

You can create an autocomplete option in your command and respond to it using the autocomplete method above run

command.ts

createCommand({
	name: "search",
	description: "Search command",
	type: ApplicationCommandType.ChatInput,
	options: [
		{
			name: "query",
			description: "Query",
			type: ApplicationCommandOptionType.String,
			autocomplete: true,
			required,
		}
	],
	async autocomplete(interaction) { 
		const focused = interaction.options.getFocused(); 
		const results = await searchData(focused); 
		if (results.length < 1) return; 
		const choices = results.map(data => ({ 
			name: data.title, value: data.url
		})); 
		interaction.respond(choices.slice(0, 25)); 
	},
	async run(interaction){
		const { options } = interaction;
 
		const query = options.getString("termo", true);
		
		interaction.reply({ flags: ["Ephemeral"], content: query });
	}
});

If you have a large number of items, use autocomplete to try to find it

command.ts

createCommand({
    // ...
    async autocomplete(interaction) {
		const { options, guild } = interaction;
 
        const focused = options.getFocused();
        const documents = await db.get(guild.id);
 
        const filtered = documents.filter(
            data => data.address.toLowercase().includes(focused.toLowercase())
        )
        if (filtered.length < 1) return;
        const choices = filtered.map(data => ({
			name: data.title, value: data.url
		}));
		interaction.respond(choices.slice(0, 25));
	},
    // ...
})

Autocomplete

Creating autocomplete options

On this page