ナビゲーション / 文書を探す
Search
文書内の現在地を保ちながら、目的の項目に移動します。
基本的な使い方
このサイトのコンポーネントを検索します。/で検索欄へ移動できます。
HTML
<label>コンポーネントを検索
<input type="search" class="input" data-dd-search placeholder="例：Chip / 表 / コード" aria-label="コンポーネントを検索" autocomplete="off" data-dd-enhance hidden>
</label>
<div class="search-results" data-dd-search-results hidden></div>
<p class="note">このサイトのコンポーネントを検索します。<kbd>/</kbd>で検索欄へ移動できます。</p>検索インデックスを用意する
JavaScript
window.ddSearchIndex = [
{ name: "Chip", href: "../chip/", where: "Lists & data", body: "Classification labels" },
{ name: "Table", href: "../table/", where: "Lists & data", body: "Comparable rows" }
];クラスと属性
| クラス / 属性 | 用途 |
|---|---|
data-dd-search | 検索入力欄。1ページに一つ置きます。 |
.search-results / data-dd-search-results | 検索結果の領域。最初は非表示にします。 |
window.ddSearchIndex | name・href・where・bodyを持つオブジェクトの配列。 |
window.ddSearch(query) | 配列を返す任意の検索関数。 |
使い方の注意
HTMLと一緒にインデックスを生成します。検索を使わない読者のために、リンク付きの一覧も残します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。