JS实现select框实现模糊搜索

简介: JS实现select框实现模糊搜索

您可以使用JavaScript来实现模糊搜索的功能,以下是一个简单的示例代码:


HTML部分:


<select id="select">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Cherry</option>
  <option value="4">Orange</option>
</select>


JavaScript部分:


document.getElementById('select').addEventListener('input', function() {
  var input, filter, option, i;
  input = this.value;
  filter = input.toUpperCase();
  options = this.getElementsByTagName('option');
  
  for (i = 0; i < options.length; i++) {
    if (options[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      options[i].style.display = '';
    } else {
      options[i].style.display = 'none';
    }
  }
});


以上代码会监听select框的input事件,当用户输入内容时,会根据用户输入的内容来过滤选项。


只有当某个选项的内容包含了用户输入的内容时,该选项才会显示出来,否则会被隐藏。


这样就实现了模糊搜索的功能。

相关文章
|
3月前
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
106 2
|
1月前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
36 4
|
1月前
|
JavaScript
js之模糊搜索
js之模糊搜索
|
1月前
|
JavaScript
js之模糊搜索
js之模糊搜索
|
1月前
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
28 0
|
1月前
|
JavaScript
js实现模糊搜索和排序
js实现模糊搜索和排序
10 0
|
2月前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置,`includes`检查是否包含子字符串。KMP是高效的搜索算法,尤其适合长模式匹配。示例展示了如何在数据采集(如网页爬虫)中使用这些方法,结合代理IP进行安全搜索。代码示例中,搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
|
1月前
|
JSON JavaScript 前端开发
使用js实现input框的模糊搜索
使用js实现input框的模糊搜索
25 0
|
1月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
76 0
|
1月前
|
JavaScript
js分页+搜索
js分页+搜索
38 0