Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Komponent Comboboxa

Ostatnia aktualizacja:

Combobox Tailwind CSS obsługujący tylko CSS z filtrowaniem wyszukiwania na żywo i dostępną listą rozwijaną. Nawigacja klawiaturowa, warianty kolorystyczne. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Combobox łączy wprowadzanie tekstu z listą rozwijaną. Użyj komponentu input dla pola — stamtąd pochodzą warianty rozmiaru, koloru i stanu. Narzędzia combobox-* obsługują tylko listę rozwijaną, elementy i stan otwarty.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
combobox-listOpieraćKontener listy rozwijanej dla opcji combobox
combobox-itemModyfikatorIndywidualna opcja na liście rozwijanej
combobox-openModyfikatorPokazuje listę rozwijaną po zastosowaniu do opakowania
combobox-primaryKolorPodświetlenie głównego motywu kolorowego elementów
combobox-secondaryKolorPodświetlenie motywu dodatkowego dla elementów
combobox-accentKolorPodświetlenie motywu akcentującego dla przedmiotów
combobox-infoKolorInformacje semantyczne wyróżnienie koloru
combobox-successKolorSukces semantycznego podkreślenia koloru
combobox-warningKolorOstrzeżenie: semantyczne podkreślenie koloru
combobox-errorKolorBłąd semantycznego podświetlenia koloru

Podstawowe użycie

Zawiń input i combobox-list w kontenerze relative. Dodaj combobox-open do opakowania, aby wyświetlić listę — przełącz ją za pomocą JS lub :focus-within.

1
2
3
4
5
6
7
8
9
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search or select...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useCombobox } from 'frutjam/react'

const frameworks = ['React', 'Vue', 'Angular', 'Svelte']

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search or select..." />
      <ul className="combobox-list" role="listbox">
        {combo.filtered.map((item, i) => (
          <li key={item} {...combo.optionProps(item, i)} className="combobox-item">{item}</li>
        ))}
      </ul>
    </div>
  )
}

Otwórz w Focusie

Użyj focus-within:combobox-open na opakowaniu, aby otworzyć listę, gdy dane wejściowe są aktywne — nie jest wymagana obsługa JavaScript.

html 
1
2
3
4
5
6
7
8
9
<div class="relative w-64 focus-within:combobox-open">
  <input type="text" class="input w-full" placeholder="Focus to open...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

Rozmiary

Użyj input-sm, input-lg itp. w polu wejściowym. Lista rozwijana dostosowuje się naturalnie.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-sm w-full" placeholder="Small">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-lg w-full" placeholder="Large">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>

Zabarwienie

Użyj input-primary itp. na wejściu dla koloru pola. Dodaj pasujący element combobox-primary do opakowania, aby zabarwić podświetlenie aktywnego elementu.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64 combobox-open combobox-primary">
  <input type="text" class="input input-primary w-full" placeholder="Primary">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>
<div class="relative w-64 combobox-open combobox-error">
  <input type="text" class="input input-error w-full" placeholder="Error">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>

Wyłączony

html 
1
2
3
<div class="relative w-64">
  <input type="text" class="input w-full" placeholder="Disabled" disabled>
</div>

Z Guzikiem

Utwórz tekst za pomocą join, aby dołączyć ikonę wyszukiwania lub przycisk wyzwalający.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="relative w-64 combobox-open">
  <div class="join w-full">
    <span class="join-item btn btn-soft">🔍</span>
    <input type="text" class="input join-item" placeholder="Search...">
  </div>
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

Elementy jako łącza lub przyciski

combobox-item działa na dowolnym elemencie — <li>, <a> lub <button>.

html 
1
2
3
4
5
6
7
8
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search pages...">
  <ul class="combobox-list">
    <a href="#" class="combobox-item">Home</a>
    <a href="#" class="combobox-item combobox-item-active">About</a>
    <button class="combobox-item">Contact</button>
  </ul>
</div>

Pomocnik JS i reagowania

Użyj createCombobox z frutjam/js lub useCombobox z frutjam/react, aby uzyskać filtrowanie, nawigację za pomocą klawiatury (↑ ↓ Enter Escape) i pełne okablowanie aria-* od razu po wyjęciu z pudełka. Wyczekuj zdarzenia fj:select, które obsłuży selekcję.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64" id="js-combobox">
  <input type="text" class="input w-full" placeholder="Search frameworks...">
  <ul class="combobox-list">
    <li class="combobox-option" data-value="react">React</li>
    <li class="combobox-option" data-value="vue">Vue</li>
    <li class="combobox-option" data-value="angular">Angular</li>
    <li class="combobox-option" data-value="svelte">Svelte</li>
  </ul>
</div>
<script type="module">
  import { createCombobox } from 'frutjam/js'
  const combo = createCombobox(document.getElementById('js-combobox'))
  document.getElementById('js-combobox').addEventListener('fj:select', (e) => {
    console.log('Selected:', e.detail.value)
  })
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useCombobox } from 'frutjam/react'

const frameworks = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
  { label: 'Angular', value: 'angular' },
  { label: 'Svelte', value: 'svelte' },
]

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search frameworks..." />
      <ul {...combo.listboxProps} className="combobox-list">
        {combo.filtered.map((item, i) => (
          <li key={item.value} {...combo.optionProps(item, i)}>{item.label}</li>
        ))}
      </ul>
    </div>
  )
}

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Combobox. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP