ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery: 検索フィルタリングを使用してデータのリストを作成する
HTML、CSS、jQuery: 検索フィルタリングを使用してデータのリストを作成する
- WBOYオリジナル
- 2023-10-26 08:30:51981ブラウズ
HTML、CSS、jQuery: 検索フィルタリングを使用してデータ リストを作成する
Web 開発では、データの表示機能と検索機能が不可欠であることがよくあります。ユーザーが必要な情報を見つけやすくするために、HTML、CSS、jQueryを使用して検索フィルタリング機能を備えたデータリストを作成できます。特定のコード例については、以下で詳しく説明します。
まず、データリストを表示するための HTML 構造が必要です。以下は簡単な例です:
<!DOCTYPE html>
<html>
<head>
<title>数据列表</title>
<style>
/* CSS样式 */
.container {
max-width: 500px;
margin: 0 auto;
}
#search-input {
width: 100%;
margin-bottom: 10px;
padding: 5px;
}
#data-list {
list-style-type: none;
padding: 0;
}
.data-item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="search-input" placeholder="搜索">
<ul id="data-list">
<li class="data-item">数据1</li>
<li class="data-item">数据2</li>
<li class="data-item">数据3</li>
<li class="data-item">数据4</li>
<li class="data-item">数据5</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>上記のコードでは、データ リストを表示するために入力ボックスと順序なしリストを作成します。入力ボックスは検索キーワードを入力するために使用され、順序なしリストはデータ項目を表示するために使用されます。
検索フィルタリング機能を実装するには、いくつかの jQuery コードを記述する必要もあります。 script.js という名前の新しいファイルを作成し、次のコードをファイルにコピーします。
$(document).ready(function() {
// 监听搜索输入框的键盘输入事件
$('#search-input').on('keyup', function() {
var searchText = $(this).val().toLowerCase();
// 遍历所有数据项
$('#data-list .data-item').filter(function() {
var itemText = $(this).text().toLowerCase();
// 隐藏不符合搜索关键字的数据项
$(this).toggle(itemText.indexOf(searchText) > -1);
});
});
});上記のコードでは、$(document).ready(function() {... .}) を使用して、ページが読み込まれた後にコードが実行されるようにします。検索入力ボックスのキーボード入力イベントをリッスンし、入力ボックス内の検索キーワードを取得します。
次に、filter メソッドを使用してすべてのデータ項目をスキャンし、検索キーワードに基づいて条件を満たさないデータ項目を非表示にします。 toggleメソッドは、データ項目を表示または非表示にするために使用されます。
script.js ファイルを保存し、HTML コードに導入します。ここで、入力ボックスにキーワードを入力してみると、検索結果に基づいてデータのリストがリアルタイムでフィルタリングされていることがわかります。
上記の HTML、CSS、jQuery のコード例により、検索フィルタリング機能を備えたデータリストを作成することができました。ニーズに応じてスタイルと機能をさらにカスタマイズできます。この例が、HTML、CSS、jQuery を使用してデータ リストを作成し、検索フィルター機能を追加する方法をより深く理解するのに役立つことを願っています。
以上がHTML、CSS、jQuery: 検索フィルタリングを使用してデータのリストを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。