(Sample)
インクリメンタルサーチとは、ユーザーが検索フィールドに文字を入力するたびにリアルタイムで検索結果を更新する検索方法です。
各文字の入力ごとに検索クエリが実行され、結果が動的に表示されます。ユーザーは入力内容に応じて即座にフィードバックを得ることができ、より効率的に目的の情報を見つけられます。
以下は、車の名前でインクリメンタルサーチをするサンプルコードです。Bootstrpのtable-hoverを使っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インクリメンタルサーチの例</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#search {
width: 300px;
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>インクリメンタルサーチ</h1>
<input type="text" id="search" placeholder="検索..." class="form-control mb-3">
<table class="table table-hover">
<thead>
<tr>
<th>車のタイプ</th>
</tr>
</thead>
<tbody id="result-list">
<tr class="result-item"><td>セダン</td></tr>
<tr class="result-item"><td>クーペ</td></tr>
<tr class="result-item"><td>SUV</td></tr>
<tr class="result-item"><td>ハッチバック</td></tr>
<tr class="result-item"><td>ステーションワゴン</td></tr>
<tr class="result-item"><td>ミニバン</td></tr>
<tr class="result-item"><td>軽自動車</td></tr>
<tr class="result-item"><td>商用車</td></tr>
<tr class="result-item"><td>ピックアップトラック</td></tr>
<tr class="result-item"><td>コンバーチブル</td></tr>
<tr class="result-item"><td>スポーツカー</td></tr>
<tr class="result-item"><td>エステート</td></tr>
<tr class="result-item"><td>クロスオーバー</td></tr>
<tr class="result-item"><td>ロードスター</td></tr>
<tr class="result-item"><td>マルチパーパスビークル（MPV）</td></tr>
<tr class="result-item"><td>クーペSUV</td></tr>
<tr class="result-item"><td>ライトコマーシャルビークル</td></tr>
<tr class="result-item"><td>ハイブリッドカー</td></tr>
<tr class="result-item"><td>電気自動車</td></tr>
<tr class="result-item"><td>リムジン</td></tr>
<tr class="result-item"><td>オフロード車</td></tr>
<tr class="result-item"><td>キャブリオレ</td></tr>
<tr class="result-item"><td>グランドツアラー（GT）</td></tr>
<tr class="result-item"><td>スーパーカー</td></tr>
<tr class="result-item"><td>ハイパーカー</td></tr>
<tr class="result-item"><td>マイクロカー</td></tr>
<tr class="result-item"><td>シティカー</td></tr>
<tr class="result-item"><td>ユーティリティビークル</td></tr>
<tr class="result-item"><td>キャンピングカー</td></tr>
<tr class="result-item"><td>空飛ぶ車</td></tr>
</tbody>
</table>
<script>
// 検索フィールドと結果リストの要素を取得
const searchInput = document.getElementById('search');
const resultList = document.getElementById('result-list');
// 検索フィールドの入力イベントリスナーを追加
searchInput.addEventListener('input', function() {
// 入力されたテキストを取得
const query = searchInput.value.toLowerCase();
// 結果リストの項目をフィルタリング
const items = resultList.getElementsByClassName('result-item');
for (let item of items) {
// 項目のテキストを取得
const text = item.textContent.toLowerCase();
// 入力されたテキストが項目に含まれているかチェック
if (text.includes(query)) {
// 含まれている場合、項目を表示
item.style.display = '';
} else {
// 含まれていない場合、項目を非表示
item.style.display = 'none';
}
}
});
</script>
</body>
</html>このコードのポイントは以下の通りです：
イベントリスナー:
searchInput.addEventListener('input', function() { ... });により、検索入力フィールドに文字が入力されるたびに実行される関数を定義します。
フィルタリングロジック:
- 入力されたテキストを小文字に変換 (
searchInput.value.toLowerCase()) してqueryに格納します。 - 結果リストの項目 (
.result-item) をすべて取得し、ループで各項目をチェックします。 - 各項目のテキストを小文字に変換 (
item.textContent.toLowerCase()) して、queryが含まれているかをチェックします。 queryが含まれている場合、その項目を表示 (item.style.display = 'block') し、含まれていない場合は非表示 (item.style.display = 'none') にします。
以上。