add options autocomplete docs

Author: notunderctrl

apps/website/docs/guide/02-commands/02-command-options-autocomplete.mdx

@@ -1,3 +1,100 @@
 ---
 title: Options autocomplete
 ---
+
+:::warning
+
+This feature is only available for chat input (slash) commands.
+
+:::
+
+In your chat input command options, autocomplete allows users on
+Discord to see a list of suggested options based on what they're
+actively typing.
+
+## Autocomplete with CommandKit
+
+In addition to registering your application commands, CommandKit can
+also handle any options you mark as 'autocomplete'. This means that
+CommandKit will automatically identify which command the autocomplete
+interaction belongs to. This will save you the hassle of registering
+and managing your own `interactionCreate` event listener.
+
+To begin, export the `autocomplete` function from the command where
+you have an option with `autocomplete` set to `true`.
+
+```ts title="src/app/commands/pet.ts"
+import type { CommandData, AutocompleteCommand } from 'commandkit';
+import { ApplicationCommandOptionType } from 'discord.js';
+
+export const command: CommandData = {
+  name: 'pet',
+  description: 'Check in one of your pets.',
+  options: [
+    {
+      name: 'name',
+      description: 'The name of your pet',
+      type: ApplicationCommandOptionType.String,
+      autocomplete: true,
+      required: true,
+    },
+  ],
+};
+
+const pets = Array.from({ length: 20 }, (_, i) => ({
+  name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
+  value: `petId_${i}`,
+}));
+
+export const autocomplete: AutocompleteCommand = async ({
+  interaction,
+}) => {
+  try {
+    // Get the input value of your autocomplete option
+    const input = interaction.options.getString('name', false);
+    if (!input) {
+      interaction.respond(pets);
+      return;
+    }
+
+    const filteredPets = pets.filter((pet) =>
+      pet.name.toLowerCase().includes(input.toLowerCase()),
+    );
+
+    // Respond with what you think the user may trying to find
+    interaction.respond(filteredPets);
+  } catch (error) {
+    console.error('Autocomplete error', error);
+  }
+};
+
+export const chatInput: ChatInputCommand = async ({
+  interaction,
+}) => {
+  const chosenPetId = interaction.options.getString('name', true);
+  const chosenPet = pets.find((pet) => pet.value === chosenPetId);
+
+  if (!chosenPet) {
+    interaction.reply('Pet not found.');
+    return;
+  }
+
+  interaction.reply(`You chose ${chosenPet.name}`);
+};
+```
+
+:::warning
+
+The Discord API only allows a maximum of 25 autocomplete options per
+response. To ensure you don't run into errors, it's highly recommended
+to manually limit your response array to this amount.
+
+:::
+
+:::tip
+
+It's highly recommended to use try/catch blocks in your `autocomplete`
+function as it's very common for autocomplete responses to run into
+errors, as they may take longer due to their dynamic nature.
+
+:::