js、jquery实现列表模糊搜索功能过程解析
实现的搜索功能:
专注于为中小企业提供成都做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业上高免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变
2. 可以点击某一项进行选中列表项
3. 可以按下上、下、回车键来控制列表项
4. 按下回车键时则会选中列表项
5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏
6. 点击文本框外部时自动隐藏下拉框
先来预览一下效果吧!
列表中包含的列表项有:
北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝尔、淮南、黄山、济南、济宁、嘉兴、南昌、南通、南宁、南京
在预览时需要输入匹配以上项目的文字,以便更好的预览效果
具体的代码实现
js、jquery实现列表模糊搜索功能 模糊搜索
北京上海杭州安庆大兴安岭安阳广州贵阳哈尔滨合肥邯郸呼伦贝尔淮南黄山济南济宁嘉兴南昌南通南宁南京
需要注意的地方:
1. 使用此方法时,需要给输入框加类名selectInput,给下拉剪头加类名picture_click、dropDowns,给列表框加类名selectList;
2. 输入框需要有list属性,list属性对应的值为列表框的id值
3. 需要给文本框绑定事件,onfocus="fuzzySearch.call(this)",(由于自定义的函数中,this指向的是window,所以需要通过call方法改变this指向,即指向该文本框,以便在方法中使用)
4. 在实现搜索功能的过程中,遇到一点小问题,就是在获取列表项的offersetTop时,获取的是28,找不出原因,最终通过查阅相关资料终于解决,即想要获取子元素的offsetTop,则需要给父元素设置相对定位,才能获取到正确的offsetTop。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前标题:js、jquery实现列表模糊搜索功能过程解析
文章源于:http://ybzwz.com/article/pccsep.html