Heim > Artikel > Web-Frontend > HTML, CSS und jQuery: Erstellen einer Datenliste mit Suchfilterung
HTML, CSS und jQuery: Erstellen einer Datenliste mit Suchfilterung
- WBOYOriginal
- 2023-10-26 08:30:51971Durchsuche
HTML, CSS und jQuery: Erstellen Sie eine Datenliste mit Suchfilterung
In der Webentwicklung sind Datenanzeige und Suchfunktionen oft unerlässlich. Um Benutzern das Auffinden der benötigten Informationen zu erleichtern, können wir mithilfe von HTML, CSS und jQuery eine Datenliste mit Suchfilterfunktion erstellen. Spezifische Codebeispiele werden unten detailliert beschrieben.
Zuerst benötigen wir eine HTML-Struktur, um die Datenliste anzuzeigen. Hier ist ein einfaches Beispiel:
<!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>Im obigen Code erstellen wir ein Eingabefeld und eine ungeordnete Liste, um die Datenliste anzuzeigen. Das Eingabefeld dient zur Eingabe von Suchbegriffen und die ungeordnete Liste dient zur Anzeige von Datenelementen.
Um die Suchfilterfunktion zu implementieren, müssen wir auch etwas jQuery-Code schreiben. Erstellen Sie eine neue Datei mit dem Namen script.js und kopieren Sie den folgenden Code in die Datei: 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.jsrrreee
$(document).ready(function() {.. .}) um sicherzustellen, dass der Code ausgeführt wird, nachdem die Seite geladen wurde. Es lauscht auf die Tastatureingabeereignisse des Sucheingabefelds und ruft die Suchbegriffe im Eingabefeld ab. Als nächstes durchlaufen Sie alle Datenelemente durch die Methode filter und blenden Datenelemente aus, die die Bedingungen basierend auf den Suchschlüsselwörtern nicht erfüllen. Die Methode toggle wird verwendet, um Datenelemente anzuzeigen oder auszublenden. 🎜🎜Speichern Sie die Datei script.js und fügen Sie sie in den HTML-Code ein. Versuchen Sie nun, Schlüsselwörter in das Eingabefeld einzugeben, und Sie können sehen, dass die Datenliste in Echtzeit basierend auf den Suchergebnissen gefiltert wird. 🎜🎜Mit den oben genannten HTML-, CSS- und jQuery-Codebeispielen haben wir erfolgreich eine Datenliste mit Suchfilterfunktion erstellt. Sie können den Stil und die Funktionalität noch weiter an Ihre Bedürfnisse anpassen. Wir hoffen, dass Ihnen dieses Beispiel dabei hilft, besser zu verstehen, wie Sie mit HTML, CSS und jQuery Datenlisten erstellen und Suchfilterfunktionen hinzufügen. 🎜Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen einer Datenliste mit Suchfilterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!