為了提高和用戶的交互性,現在的輸入框往往都采用輸入信息自動提示的功能,類似於百度輸入框中的提示功能；
設計思路是在input下方放置一個div標簽，將從數據庫中獲取的數據動態封裝成一段html代碼放置到該div里面，再給其中的每一項添加鼠標懸浮，鼠標移出，單擊的js事件
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索框自動提示方法</title> </head> <body> <div class="search_Box"> <!--設置存放搜索框的div--> <input type="text" autocomplete="off"> <!--搜索框類型為text,取消瀏覽器自動記錄輸入歷史記錄--> <div class="prompt"style="z-index: 2"></div> <!--用來存放提示信息的div, z-index 屬性設置元素的堆疊順序。 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。 設置prompt的絕對位置使其位於input的下方--> </div> </body> </html>
js代碼
var $repeat=0； //設置一個自定義全局參數用來存儲在一定時間內搜索框的值是否已被改變 var $timeout; //設置一個自定義全局參數用來存儲timeout時間觸發器 $(".ui_autocomplete_input").bind('input oninput',function () { //綁定事件，當搜索框值被改變時觸發 if($repeat==0){ //如果repeat等於0，代表在這之前300毫秒內沒觸發過這個文本框改變事件 $repeat=1; //設置repeat等於1，文本框的值已經改變了，但是還沒去數據庫取數據 $timeout = window.setTimeout(function () { //設置一個延時的方法，用全局變量timeout表示它 getPrompt()； //自定義的方法，從數據庫中取數據的方法 $repeat=0; //如果執行了取數據的方法，重置repeat參數為0，代表已經執行取數據操作 },300) } else{ //當文本框內的值發生改變，如果上一次的文本框值改變的還沒完成取數據操作 window.clearTimeout($timeout) //通過timeout變量，清除上一次的延時函數，不讓其執行取數據操作 $timeout = window.setTimeout(function () { //重新定義一個新的延時函數，同樣用timeout表示它 getPrompt(); //(同上） $repeat=0; //取數據成功，重置repeat },300) }
設置首次加載10條，並顯示一個滾動條，當滾動到底部自動加載下10條數據
http://blog.csdn.net/yafei450225664/article/details/40889057