Autocomplétion

L'autocomplétion vous permet de fournir dynamiquement une sélection de valeurs à l'utilisateur, en fonction de son entrée, plutôt que de compter sur des choix statiques. Dans cette section, nous couvrirons comment ajouter la prise en charge de l'autocomplétion à vos commandes.

Activation de l'autocomp létion

Pour utiliser l'autocomp létion avec vos commandes, au lieu de lister des choix statiques, l'option doit être définie pour utiliser l'autocomp létion en utilisant SlashCommandStringOption#setAutocomplete :

const { SlashCommandBuilder } = require('discord.js');

const data = new SlashCommandBuilder()
	.setName('guide')
|	.setDescription('Recherchez sur discordjs.guide !')
|
|	.addStringOption((option) => option.setName('query').setDescription('Phrase à rechercher').setAutocomplete(true));

Répondre aux interactions d'autocomp létion

Pour gérer une AutocompleteInteraction, utilisez le garde de type BaseInteraction#isAutocomplete pour vous assurer que l'instance d'interaction est une interaction d'autocomp létion. Vous pouvez le faire dans un écouteur interactionCreate séparé :

client.on(Events.InteractionCreate, (interaction) => {
|
|	if (!interaction.isAutocomplete()) return;
|	// gérer l'autocomp létion
});

Ou alternativement, en effectuant une petite modification de votre gestionnaire de commande existant et en ajoutant une méthode supplémentaire à vos fichiers de commande individuels.

L'exemple ci-dessous montre comment cela pourrait être appliqué à une version conceptuelle de la commande guide pour déterminer le sujet le plus proche de l'entrée de recherche :

client.on(Events.InteractionCreate, async (interaction) => {
|	if (interaction.isChatInputCommand()) {
|		// gestion de commande...
|
|	} else if (interaction.isAutocomplete()) {
|		const command = interaction.client.commands.get(interaction.commandName);
|
|		if (!command) {
|			console.error(`Aucune commande correspondant à ${interaction.commandName} n'a été trouvée.`);
|			return;
|		}
|
|
|		try {
|			await command.autocomplete(interaction);
|		} catch (error) {
|			console.error(error);
|		}
	}
});

La gestion des commandes est presque identique, mais remarquez le changement de execute à autocomplete dans la nouvelle branche else-if. En ajoutant une fonction autocomplete séparée à module.exports des commandes qui nécessitent une autocomp létion, vous pouvez séparer étanche la logique de fourniture de choix dynamiques du code qui doit répondre à la commande slash une fois qu'elle est terminée.

Envoi des résultats

La classe AutocompleteInteraction fournit la méthode AutocompleteInteraction#respond pour envoyer une réponse. En l'utilisant, vous pouvez soumettre un tableau d'objets ApplicationCommandOptionChoiceData parmi lesquels l'utilisateur peut choisir. Passer un tableau vide affichera "Aucune option ne correspond à votre recherche" pour l'utilisateur.

La méthode CommandInteractionOptionResolver#getFocused retourne la valeur de l'option actuellement focusée, qui peut être utilisée pour appliquer un filtrage aux choix présentés. Par exemple, pour afficher uniquement les options commencant par la valeur focusée, vous pouvez utiliser la méthode Array#filter(), puis en utilisant Array#map(), vous pouvez transformer le tableau en un tableau d'objets ApplicationCommandOptionChoiceData.

module.exports = {
	data: new SlashCommandBuilder()
		.setName('guide')
|	.setDescription('Recherchez sur discordjs.guide !')
|	.addStringOption((option) => option.setName('query').setDescription('Phrase à rechercher').setAutocomplete(true)),
|	
|	async autocomplete(interaction) {
|
|		const focusedValue = interaction.options.getFocused(); 
|		const choices = [
|			'Sujets populaires : Threads',
|			'Sharding : Pour commencer',
|			'Bibliothèque : Connexions vocales',
|			'Interactions : Répondre aux commandes slash',
|			'Sujets populaires : Aperçu d\'intergiciel',
|		];
|		const filtered = choices.filter((choice) => choice.startsWith(focusedValue));
|		await interaction.respond(filtered.map((choice) => ({ name: choice, value: choice })));
	},
};

Gestion de plusieurs options d'autocomp létion

Pour distinguer entre plusieurs options, vous pouvez passer true dans CommandInteractionOptionResolver#getFocused, qui retournera maintenant l'objet focusé complet au lieu de juste la valeur. Ceci est utilisé pour obtenir le nom de l'option focusée ci-dessous, permettant à plusieurs options d'avoir chacune leur propre ensemble de suggestions :

module.exports = {
	data: new SlashCommandBuilder()
		.setName('guide')
|		.setDescription('Recherchez sur discordjs.guide !')
|		.addStringOption((option) => option.setName('query').setDescription('Phrase à rechercher').setAutocomplete(true))
|
|		.addStringOption((option) =>
|			option.setName('version').setDescription('Version à rechercher').setAutocomplete(true),
		),
	async autocomplete(interaction) {
|
|		const focusedValue = interaction.options.getFocused(); 
|		const choices = [
|			'Sujets populaires : Threads',
|			'Sharding : Pour commencer',
|			'Bibliothèque : Connexions vocales',
|			'Interactions : Répondre aux commandes slash',
|			'Sujets populaires : Aperçu d\'intergiciel',
|		];
|		const filtered = choices.filter((choice) => choice.startsWith(focusedValue));
|
|		const focusedOption = interaction.options.getFocused(true);
|		let choices;
|
|		if (focusedOption.name === 'query') {
|			choices = [
|				'Sujets populaires : Threads',
|				'Sharding : Pour commencer',
|				'Bibliothèque : Connexions vocales',
|				'Interactions : Répondre aux commandes slash',
|				'Sujets populaires : Aperçu d\'intergiciel',
|			];
|		}

		if (focusedOption.name === 'version') {
			choices = ['v9', 'v11', 'v12', 'v13', 'v14'];
		}

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

Accéder à d'autres valeurs

En plus du filtrage basé sur la valeur focusée, vous pouvez également souhaiter modifier les choix affichés en fonction de la valeur d'autres arguments dans la commande. Les méthodes suivantes fonctionnent de la même manière dans AutocompleteInteraction :

const string = interaction.options.getString('input');
const integer = interaction.options.getInteger('int');
const boolean = interaction.options.getBoolean('choice');
const number = interaction.options.getNumber('num');

Cependant, les méthodes .getUser(), .getMember(), .getRole(), .getChannel(), .getMentionable() et .getAttachment() ne sont pas disponibles pour les interactions d'autocomp létion. Discord n'envoie pas les objets complets respectifs pour ces méthodes jusqu'à ce que la commande slash soit terminée. Pour ceux-ci, vous pouvez obtenir la valeur Flocon de neige en utilisant interaction.options.get('option').value :

Notes

• Comme pour les autres interactions de commande d'application, les interactions d'autocomp létion doivent recevoir une réponse dans les 3 secondes.
• Vous ne pouvez pas déférer la réponse à une interaction d'autocomp létion. Si vous traitez des suggestions asynchrones, comme celles d'une API, envisagez de conserver un cache local.
• Après que l'utilisateur sélectionne une valeur et envoie la commande, elle sera reçue en tant que ChatInputCommandInteraction régulière avec la valeur choisie.
• Vous ne pouvez répondre qu'avec un maximum de 25 choix à la fois, bien que davantage que cela signifie probablement que vous devriez réviser votre filtre pour affiner davantage les sélections.