jquery select如何实现搜索功能

avatar
作者
猴君
阅读量:0

要在jQuery中实现搜索功能,可以使用filter()函数结合输入事件监听器。以下是一个简单的示例,展示了如何为选择器添加搜索功能:

  1. 首先,确保您已经在HTML文件中包含了jQuery库:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
  1. 创建一个包含选项的下拉列表:
<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> 
  1. 编写一个JavaScript函数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项目中使用。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!