Autocompletado.

<div class="ui-sample ui-form ui-autocomplete"><label for="autocomplete-0">Comuna</label><input class="input" id="autocomplete-0" list="autocomplete-0-options" autoComplete="off" value=""/><datalist id="autocomplete-0-options"><option value="Santiago"></option><option value="Estación Central"></option><option value="San Miguel"></option></datalist><small>Escribe al menos dos letras para ver las comunas que coinciden.</small></div>

<div class="ui-sample ui-form ui-autocomplete border border-slate-300 bg-white p-4 text-slate-950"><label for="autocomplete-0">Comuna</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="autocomplete-0" list="autocomplete-0-options" autoComplete="off" value=""/><datalist id="autocomplete-0-options"><option value="Santiago"></option><option value="Estación Central"></option><option value="San Miguel"></option></datalist><small class="text-sm text-slate-600">Escribe al menos dos letras para ver las comunas que coinciden.</small></div>

import type { ChangeEventHandler } from "react";

export interface AutocompleteOption {
  /** Valor que el navegador sugiere y escribe en el campo. */
  value: string;
}

export interface AutocompleteSuggestion {
  /** Texto visible de la sugerencia. */
  label: string;
}

export interface AutocompleteProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo; la lista nativa usa `${id}-options`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Valores de la lista nativa (`<datalist>`); funcionan sin JavaScript. */
  options?: AutocompleteOption[];
  /** Coincidencias visibles para el texto escrito, sólo informativas; sin sugerencias no se muestra la lista. */
  suggestions?: AutocompleteSuggestion[];
  /** Nombre accesible de la lista de sugerencias visibles. */
  suggestionsLabel?: string;
  /** Texto de ayuda bajo el campo. */
  help?: string;
  className?: string;
}

/**
 * Campo de texto con sugerencias nativas del navegador, para escribir un valor conocido (comuna, región) sin obligar a elegirlo de una lista.
 *
 * Las `options` van en un `<datalist>`: el navegador las ofrece y el usuario elige ahí, también sin JavaScript. Las `suggestions` son una lista visible de coincidencias que calcula quien lo usa; no se pueden elegir con clic ni teclado. Para elegir de una lista propia, usa `Combobox`.
 *
 * @example <Autocomplete id="comuna" options={[{ value: "Santiago" }, { value: "San Miguel" }]} />
 * @example <Autocomplete id="comuna" value={texto} onChange={filtrar} suggestions={coincidencias} />
 */
export function Autocomplete({
  label = "Comuna",
  id = "autocomplete-0",
  name,
  defaultValue = "",
  value,
  onChange,
  options = [{ value: "Santiago" }, { value: "Estación Central" }, { value: "San Miguel" }],
  suggestions = [],
  suggestionsLabel = "Sugerencias",
  help = "Escribe al menos dos letras para ver las comunas que coinciden.",
  className,
}: AutocompleteProps) {
  const listaId = options.length ? `${id}-options` : undefined;
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <div className={["ui-form ui-autocomplete", className].filter(Boolean).join(" ")}>
      <label htmlFor={id}>{label}</label>
      <input
        className="input"
        id={id}
        name={name}
        list={listaId}
        autoComplete="off"
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      {options.length ? (
        <datalist id={listaId}>
          {options.map((opcion, i) => <option key={`${i}-${opcion.value}`} value={opcion.value} />)}
        </datalist>
      ) : null}
      {suggestions.length ? (
        <ul aria-label={suggestionsLabel}>
          {suggestions.map((sugerencia, i) => (
            <li key={`${i}-${sugerencia.label}`}>{sugerencia.label}</li>
          ))}
        </ul>
      ) : null}
      {help ? <small>{help}</small> : null}
    </div>
  );
}