實(shí)現(xiàn)的搜索功能：

專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)上高免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1. 可以匹配輸入的字符串找出列表中匹配的項(xiàng)，列表框的高度跟隨搜索出的列表項(xiàng)的多少改變

2. 可以點(diǎn)擊某一項(xiàng)進(jìn)行選中列表項(xiàng)

3. 可以按下上、下、回車(chē)鍵來(lái)控制列表項(xiàng)

4. 按下回車(chē)鍵時(shí)則會(huì)選中列表項(xiàng)

5. 點(diǎn)擊文本框中的下拉鍵頭時(shí)會(huì)切換下拉框的顯示/隱藏

6. 點(diǎn)擊文本框外部時(shí)自動(dòng)隱藏下拉框

先來(lái)預(yù)覽一下效果吧！

列表中包含的列表項(xiàng)有：

北京、上海、杭州、安慶、大興安嶺、安陽(yáng)、廣州、貴陽(yáng)、哈爾濱、合肥、邯鄲、呼倫貝爾、淮南、黃山、濟(jì)南、濟(jì)寧、嘉興、南昌、南通、南寧、南京

在預(yù)覽時(shí)需要輸入匹配以上項(xiàng)目的文字，以便更好的預(yù)覽效果

具體的代碼實(shí)現(xiàn)

  
  
 




  
模糊搜索
  

    城市：
    
    

    

      
北京
      
上海
      
杭州
      
安慶
      
大興安嶺
      
安陽(yáng)
      
廣州
      
貴陽(yáng)
      
哈爾濱
      
合肥
      
邯鄲
      
呼倫貝爾
      
淮南
      
黃山
      
濟(jì)南
      
濟(jì)寧
      
嘉興
      
南昌
      
南通
      
南寧
      
南京
    
  

需要注意的地方：

1. 使用此方法時(shí)，需要給輸入框加類(lèi)名selectInput，給下拉剪頭加類(lèi)名picture_click、dropDowns，給列表框加類(lèi)名selectList;

2. 輸入框需要有l(wèi)ist屬性，list屬性對(duì)應(yīng)的值為列表框的id值

3. 需要給文本框綁定事件，onfocus="fuzzySearch.call(this)"，（由于自定義的函數(shù)中，this指向的是window，所以需要通過(guò)call方法改變this指向，即指向該文本框，以便在方法中使用）

4. 在實(shí)現(xiàn)搜索功能的過(guò)程中，遇到一點(diǎn)小問(wèn)題，就是在獲取列表項(xiàng)的offersetTop時(shí)，獲取的是28，找不出原因，最終通過(guò)查閱相關(guān)資料終于解決，即想要獲取子元素的offsetTop，則需要給父元素設(shè)置相對(duì)定位，才能獲取到正確的offsetTop。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。