js、jquery实现列表模糊搜索功能过程解析-创新互联

实现的搜索功能：

1. 可以匹配输入的字符串找出列表中匹配的项，列表框的高度跟随搜索出的列表项的多少改变

2. 可以点击某一项进行选中列表项

3. 可以按下上、下、回车键来控制列表项

4. 按下回车键时则会选中列表项

5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏

6. 点击文本框外部时自动隐藏下拉框

先来预览一下效果吧！

列表中包含的列表项有：

北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝尔、淮南、黄山、济南、济宁、嘉兴、南昌、南通、南宁、南京

在预览时需要输入匹配以上项目的文字，以便更好的预览效果

具体的代码实现

  
  
 




  
模糊搜索
  

    城市：
    
    

    

      
北京
      
上海
      
杭州
      
安庆
      
大兴安岭
      
安阳
      
广州
      
贵阳
      
哈尔滨
      
合肥
      
邯郸
      
呼伦贝尔
      
淮南
      
黄山
      
济南
      
济宁
      
嘉兴
      
南昌
      
南通
      
南宁
      
南京