Combobox

Una lista de frutas filtrable que demuestra la composición completa de Combobox con navegación por teclado.

Paquete: @solidiom/combobox
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

El ejemplo en vivo filtra una lista de frutas mientras escribes. Usa ArrowDown y ArrowUp para navegar entre elementos, Enter para seleccionar el elemento resaltado y Escape para cerrar el listbox. La entrada mantiene el foco durante toda la interacción usando el patrón de descendiente activo.

La lógica de filtrado se ejecuta en el consumidor, no dentro del primitivo. Esto mantiene a Combobox agnóstico respecto a la estrategia de coincidencia, permitiendo a los consumidores implementar búsqueda difusa, por subcadena o del lado del servidor.

Fruta

Ver código fuente

        export function ComboboxExample(props: ComboboxExampleProps) {
  const [filter, setFilter] = createSignal("")

  const filteredItems = () => {
    const query = filter().toLowerCase()
    if (!query) return ITEMS
    return ITEMS.filter(
      (item) =>
        item.label[props.locale].toLowerCase().includes(query) ||
        item.value.toLowerCase().includes(query),
    )
  }

  const copy = () => COPY[props.locale]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="combobox-example"
      data-combobox-example
    >
      <label class="combobox-example__label" id="combobox-example-label">
        {copy().label}
      </label>
      <Combobox.Root>
        <Combobox.Input
          placeholder={copy().placeholder}
          onFilter={setFilter}
          class="combobox-example__input"
        />
        <Combobox.Content class="combobox-example__content">
          <For each={filteredItems()}>
            {(item) => (
              <Combobox.Item value={item.value} textValue={item.label[props.locale]}>
                <Combobox.ItemText>{item.label[props.locale]}</Combobox.ItemText>
              </Combobox.Item>
            )}
          </For>
        </Combobox.Content>
      </Combobox.Root>
    </div>
  )
}