跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

组合框组件

最后更新:

仅 CSS Tailwind CSS 组合框，具有实时搜索过滤和可访问的下拉列表。键盘导航，颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

组合框将文本输入与下拉列表组合在一起。使用字段的输入组件 - 大小、颜色和状态变体都来自那里。 combobox-* 实用程序仅处理下拉列表、项目和打开状态。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
combobox-list根据组合框选项的下拉列表容器
combobox-item修饰符下拉列表中的单个选项
combobox-open修饰符应用于包装器时显示下拉列表
combobox-primary颜色项目的主要主题颜色突出显示
combobox-secondary颜色Secondary theme color highlight for items
combobox-accent颜色项目的强调主题颜色突出显示
combobox-info颜色信息语义颜色高亮
combobox-success颜色Success semantic color highlight
combobox-warning颜色警告语义颜色突出显示
combobox-error颜色错误语义颜色突出显示

基本用法

将 input 和 combobox-list 包装在 relative 容器中。将 combobox-open 添加到包装器以显示列表 - 通过 JS 或 :focus-within 切换它。

  • React
  • Vue
  • Angular
  • Svelte
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>
  )
}

焦点打开

当输入获得焦点时，在包装器上使用 focus-within:combobox-open 打开列表 - 无需 JavaScript。

  • React
  • Vue
  • Angular
  • Svelte
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>

尺寸

在输入字段上使用 input-sm、input-lg 等。下拉菜单会自然适应。

  • Banana
  • Mango
  • Papaya
  • Banana
  • Mango
  • Papaya
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>

颜色

在字段颜色的输入上使用 input-primary 等。将匹配的 combobox-primary 添加到包装器中，以对活动项突出显示进行着色。

  • React
  • Vue
  • Angular
  • React
  • Vue
  • Angular
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>

残疾人

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

带按钮

使用 join 撰写以附加搜索图标或触发按钮。

🔍
  • React
  • Vue
  • Angular
  • Svelte
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>

Items as Links or Buttons

combobox-item 适用于任何元素 - <li>、<a> 或 <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>

JS 和 React 助手

使用 frutjam/js 中的 createCombobox 或 frutjam/r​​eact 中的 useCombobox 来获得过滤、键盘导航（↑ ↓ 输入 Escape）以及开箱即用的完整 aria-* 接线。监听 fj:select 事件来处理选择。

  • React
  • Vue
  • Angular
  • Svelte
 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-item" data-value="react">React</li>
    <li class="combobox-item" data-value="vue">Vue</li>
    <li class="combobox-item" data-value="angular">Angular</li>
    <li class="combobox-item" 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>
  )
}

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 组合框 类名称和结构。不再有幻觉课程。

尝试Cherry MCP