jQuery實現input框輸入值動態搜索


   我們在平時的前端開發中,經常會遇到添加數據,如果在添加之前要指定某個用戶或對象進行關聯,那在實現上要比普通的添加要繁瑣一點。我本來的想法是給一個iframe,在

里面顯示所有的數據並提供一個篩選的功能,但是覺得比較繁瑣。於是想到了在百度上搜素時,它的自動搜索和此種需求比較切合,且在操作中比較方便。但是也存在着顯示數據

不可過多,篩選條件單一的缺點。

   當然這種實時的前后台交互是利用ajax實現的。

   首先貼一下最后的效果:

   選擇相應的結果后:

   注:這里前方多出的序列號是為了方便取出獲取到的用戶表主鍵,雖然覺得不太安全,但還是這么做了....

  具體的實現代碼如下:

  首先是頁面的input輸入框,以及用來展示搜索結果的ul區域。這里使用ul是借鑒(其實就是拷),因為我對css實在不感冒。

  

  關於如何實現用戶輸入后實時搜索,我在百度查了一下,了解到的大致有以下:

  以秒為單位對input框進行監聽,用戶輸入的間隔時間大概為半秒,因此每半秒去請求后台。

  還有就是我采用的這種方法,使用keyup函數,並對輸入內容做簡單的判斷:

  

 下面是ajax請求后,對獲取的數據進行處理:

 由於后台想要的只是一個ID,用戶名稱是給前台操作人員看的,所以這里為了方便知道用戶選擇了哪個結果,我把ID也顯示了出來

 在前台我沒有對顯示的數據條數進行限制,這個限制可以放在后台,但其實現在后台我還沒加

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM