我們在平時的前端開發中,經常會遇到添加數據,如果在添加之前要指定某個用戶或對象進行關聯,那在實現上要比普通的添加要繁瑣一點。我本來的想法是給一個iframe,在
里面顯示所有的數據並提供一個篩選的功能,但是覺得比較繁瑣。於是想到了在百度上搜素時,它的自動搜索和此種需求比較切合,且在操作中比較方便。但是也存在着顯示數據
不可過多,篩選條件單一的缺點。
當然這種實時的前后台交互是利用ajax實現的。
首先貼一下最后的效果:

選擇相應的結果后:

注:這里前方多出的序列號是為了方便取出獲取到的用戶表主鍵,雖然覺得不太安全,但還是這么做了....
具體的實現代碼如下:
首先是頁面的input輸入框,以及用來展示搜索結果的ul區域。這里使用ul是借鑒(其實就是拷),因為我對css實在不感冒。

關於如何實現用戶輸入后實時搜索,我在百度查了一下,了解到的大致有以下:
以秒為單位對input框進行監聽,用戶輸入的間隔時間大概為半秒,因此每半秒去請求后台。
還有就是我采用的這種方法,使用keyup函數,並對輸入內容做簡單的判斷:

下面是ajax請求后,對獲取的數據進行處理:
由於后台想要的只是一個ID,用戶名稱是給前台操作人員看的,所以這里為了方便知道用戶選擇了哪個結果,我把ID也顯示了出來
在前台我沒有對顯示的數據條數進行限制,這個限制可以放在后台,但其實現在后台我還沒加

