要在jQuery中實現搜索功能,可以使用filter()
函數結合輸入事件監聽器。以下是一個簡單的示例,展示了如何為選擇器添加搜索功能:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="text" id="searchInput" onkeyup="searchFunction()" placeholder="Search for names..">
<br>
<select id="mySelect">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="orange">Orange</option>
<option value="watermelon">Watermelon</option>
</select>
searchFunction()
,該函數將在用戶輸入時被調用。在這個函數中,我們將使用filter()
函數來過濾下拉列表中的選項,并將結果顯示給用戶:function searchFunction() {
let input, filter, a, i;
input = document.getElementById("searchInput");
filter = input.value.toUpperCase();
div = document.getElementById("mySelect");
a = div.getElementsByTagName("option");
for (i = 0; i < a.length; i++) {
txtValue = a[i].text;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
現在,當用戶在搜索框中輸入時,下拉列表將根據輸入的文本過濾選項。請注意,這個示例使用了原生JavaScript,而不是jQuery,因為jQuery沒有提供直接的搜索功能。但是,這個示例仍然可以在jQuery項目中使用。