Combobox

static / async / hybrid · Dropdown 合成 · InfiniteScroll ページング

Preview

static

選択

async（debounce=300）

非同期

下端スクロールで追加

hybrid + multiple

複数選択

静的＋非同期をマージ

HTML

<tw-combobox id="cb-static" placeholder="果物を検索…">
  <tw-button slot="trigger" variant="stroke">選択</tw-button>
</tw-combobox>

<tw-combobox id="cb-async" mode="async" placeholder="サーバー検索…" sort-key="updated_at">
  <tw-button slot="trigger" variant="stroke">非同期</tw-button>
</tw-combobox>

import "@b4moss/the-wheels";

const staticCb = document.getElementById("cb-static");
staticCb.options = [
  { value: 1, label: "Apple" },
  { value: 2, label: "Banana" },
  { value: 3, label: "Cherry" },
];

import "@b4moss/the-wheels";
import type { TwCombobox } from "@b4moss/the-wheels";

const staticCb = document.getElementById("cb-static") as TwCombobox;
staticCb.options = [
  { value: 1, label: "Apple" },
  { value: 2, label: "Banana" },
];