Async autocompleteforms

Debounced async search input with abortable loader, loading, empty and error states with retry, match highlighting and a minimum query length.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/autocomplete

의존 아이템button combobox input-group locale style

Default

Picked: none

autocomplete-demo.tsx

"use client";
import * as React from "react";import { Autocomplete, type AutocompleteOption } from "@/components/ui/autocomplete";
const cities = ["Busan", "Berlin", "Boston", "Bangkok", "Barcelona", "Brussels"];
function search(query: string, signal: AbortSignal): Promise<AutocompleteOption[]> {  return new Promise((resolve, reject) => {    const timer = setTimeout(() => {      const q = query.toLowerCase();      resolve(cities.filter((c) => c.toLowerCase().includes(q)).map((c) => ({ value: c.toLowerCase(), label: c })));    }, 150);    signal.addEventListener("abort", () => {      clearTimeout(timer);      reject(signal.reason);    });  });}
export default function AutocompleteDemo() {  const [picked, setPicked] = React.useState<string | null>(null);  return (    <div className="flex w-72 flex-col gap-2">      <Autocomplete aria-label="City" loadOptions={(query, { signal }) => search(query, signal)} onSelect={(option) => setPicked(option.value)} />      <p className="text-sm text-muted-foreground">Picked: {picked ?? "none"}</p>    </div>  );}