Autocomplete

Autocomplete allows you to dynamically provide a selection of values to the user, based on their input. In this section we will cover how to add autocomplete support to your commands.

TIP

This page is a follow-up to the interactions (slash commands) page. Please carefully read those first so that you can understand the methods used in this section.

Enabling autocomplete

To use autocomplete with your commands, you have to set the respective option when deploying commands:

const commandData = new SlashCommandBuilder()
	.setName('autocomplete')
	.setDescription('Test command to show how autocomplete should be set up')
	.addStringOption(option =>
		option
			.setName('name')
			.setDescription('Name of something')
			.setAutocomplete(true));

1
2
3
4
5
6
7
8

Responding to autocomplete interactions

To handle an AutocompleteInteractionopen in new window, you can listen to the interactionCreate event and use the Interaction#isAutocompleteopen in new window method to make sure the interaction instance is an autocomplete interaction:

client.on('interactionCreate', interaction => {
	if (!interaction.isAutocomplete()) return;
});

1
2
3

The AutocompleteInteractionopen in new window class provides the AutocompleteInteraction#respondopen in new window method to send a response.

Sending results

Using AutocompleteInteraction#respondopen in new window you can submit an array of ApplicationCommandOptionChoiceopen in new window objects. Passing an empty array will show "No options match your search" for the user.

The CommandInteractionOptionResolver#getFocusedopen in new window method returns the currently focused option's value. This value is used to filter the choices presented. To only display options starting with the focused value you can use the Array#filter() method. By using Array#map(), you can transform the array into an array of ApplicationCommandOptionChoiceopen in new window objects.

client.on('interactionCreate', async interaction => {
	if (!interaction.isAutocomplete()) return;

	if (interaction.commandName === 'autocomplete') {
		const focusedValue = interaction.options.getFocused();
		const choices = ['faq', 'install', 'collection', 'promise', 'debug'];
		const filtered = choices.filter(choice => choice.startsWith(focusedValue));
		await interaction.respond(
			filtered.map(choice => ({ name: choice, value: choice })),
		);
	}
});

1
2
3
4
5
6
7
8
9
10
11
12

Handling multiple autocomplete options

To distinguish between multiple options you can pass true into CommandInteractionOptionResolver#getFocusedopen in new window which now returns the full focused object instead of just the value. This is used to get the name of the focused option below:

client.on('interactionCreate', async interaction => {
	if (!interaction.isAutocomplete()) return;

	if (interaction.commandName === 'autocomplete') {
		const focusedOption = interaction.options.getFocused(true);
		let choices;

		if (focusedOption.name === 'name') {
			choices = ['faq', 'install', 'collection', 'promise', 'debug'];
		}

		if (focusedOption.name === 'theme') {
			choices = ['halloween', 'christmas', 'summer'];
		}

		const filtered = choices.filter(choice => choice.startsWith(focusedOption.value));
		await interaction.respond(
			filtered.map(choice => ({ name: choice, value: choice })),
		);
	}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Notes

You have to respond to the request within 3 seconds, as with other application command interactions
You cannot defer the response to an autocomplete interaction
After the user selects a value and sends the command, it will be received as a CommandInteractionopen in new window with the chosen value

# Autocomplete

# Enabling autocomplete

# Responding to autocomplete interactions

# Sending results