この記事では、JavaScriptを使用してリストをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがリスト内のアイテムを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのウェブサイトに簡単に実装することができます。
- HTML
- CSS
- JavaScript
- PHP
基本的なHTMLテーブルの構造
まず、フィルタリング機能を実装するための基本的なHTMLリストを作成しましょう。
以下は、シンプルなリストの構造例です。
<ul id="myList">
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
<!-- 以下、さらにリストアイテムを追加 -->
</ul>検索ボックスの追加
次に、リストアイテムを検索するための検索ボックスを作成します。
<input type="text" id="searchInput" placeholder="キーワードで検索">JavaScriptコードでフィルタリング機能を実装
最後に、JavaScriptコードを使って、検索ボックスで入力されたキーワードに基づいてリストアイテムをフィルタリングする機能を実装します。
document.getElementById('searchInput').addEventListener('keyup', function() {
let searchValue = this.value.toLowerCase();
let listItems = document.getElementById('myList').getElementsByTagName('li');
for (let i = 0; i < listItems.length; i++) {
let itemText = listItems[i].textContent.toLowerCase();
if (itemText.indexOf(searchValue) > -1) {
listItems[i].style.display = '';
} else {
listItems[i].style.display = 'none';
}
}
});このJavaScriptコードでは、検索ボックスでキーワードが入力されるたびに、keyupイベントが発火し、リストアイテムをフィルタリングする関数が実行されます。関数内では、入力されたキーワードを小文字に変換し、リストの各アイテムをループ処理しています。アイテムのテキストがキーワードを含んでいれば、そのアイテムを表示し、含んでいなければ非表示にしています。
コメント