項目中有時會用到ajax自動補全查詢,就像Google的搜索框中那樣,輸入漢字或者字母的首個字母,則包含這個漢字或者字母的相關條目會顯示出來供用戶選擇,該插件就是實現這樣的功能的。autocomplete官網 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下載jQuery autocomplete插件)。
使用此插件需要引用兩個js文件和一個css文件,
分別如下:
jquery核心庫文件 <script src="./jquery-1.3.2.js"type="text/javascript"></script>
當jquery版本過高時 需要使用jquery兼容文件<script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>
插件js文件 <script src="./jquery.autocomplete.js" type="text/javascript"></script>
插件樣式文件 <link rel="stylesheet" href="./jquery.autocomplete.css" />
插件的參數說明如下:
minChars(number) 該參數指定在觸發autocomplete之前用戶在查詢框中輸入的最小字符數,通常設置為1,即文本框值不為空的時候執行autocomplete,如果取值為0,則在用戶雙擊查詢文本框或刪除文本框內容時查詢
width 該參數的用途是指定下拉框的寬度,通常不用設置,默認的值為和<input>元素相同
max 查詢時下拉列表框中顯示的條目數,defaultValue為10
delay 擊鍵后激活autoComplete的延遲時間(單位毫秒).Default: 遠程為400 本地10
autoFill(boolean) 是否在用戶選擇時自動將用戶鼠標所在的值填充到input元素中,default:false
mustMatch(boolean) 參數boolean類型,true時,如果輸入的查詢條件無法匹配到合適的結果,則<input>元素中輸入的查詢值會自動清空,否則會保留。Default:false
selectFirst(boolean) 參數為true時,則用戶按下tab鍵或者return鍵時會自動將查詢結果的第一條記錄選中到input元素中
cacheLength(number) 緩存記錄的條數,即從數據庫中取得記錄要緩存多少條,1為不緩存,defalut:10
matchSubset(boolean) 是否對從服務器的查詢結果使用緩存,比如:上一次的搜索關鍵字為java,則下次再次輸入java進行查詢時不用再次連接服務器查詢,
而是從緩存中取得上次查詢的結果,這樣做可以減少訪問服務器的次數,提供性能。Default:true
matchCase(boolean) 是否開啟大小寫敏感開關,在使用緩存時比較重要
multiple(boolean) 是否允許多值查詢,如果為true,則查詢到第一條結果后,再次輸入查詢條件則會后續的查詢結果顯示出來。
multipleSeparator(string) 只有在multiple屬性設置為true時此屬性才能生效,該屬性用來控制在多條件查詢時使用的分隔符,default:”,”
scroll(boolean) 設置當結果集大於默認高度時是否使用滾動條顯示,default:true
scrollHeight(number) 查詢結果框的顯示高度,當超過該高度時會使用scroll
formatItem(Function) 對服務器返回的每一行數據都調用該函數來處理,返回值將用LI元素包含顯示在下拉列表中,autocomplete會提供三個參數(row,I,max)其中row表示服務器端返回回來的結果數組,i為當前的行數(正在處理第幾行數據),max為返回的記錄總數(查詢到的結果總數),default:none,不指定則直接返回服務器的結果值
formatResult(Function) 功能和formatItem基本類似,同樣有三個參數作用相同,暫時沒發現寫該與不寫該函數有什么區別
formatMatch(Function) 暫時不清楚該函數的具體功能,在我做的項目模塊中寫不寫該函數一個樣
result(handler)return jquery 此事件會在用戶選中某一項后觸發,參數為:event,data,formatted Event為事件對象 Data為選中的數據行 Formatted:formatResult函數的返回值 例如: $("#singleBirdRemote").result(function(event, data, formatted) { 如選擇后給其他控件賦值,觸發別的事件等等
extraParams (Object): 為服務器端后台提供更多的參數,參數的形式如下:{name:lixiao},在向后台傳遞參數時會自動在url后追加該參數?name=lixiao
使用注意事項: 1:在使用遠程地址時,它默認傳入的參數是:q(輸入值),limit(返回結果的最大值),可以使用extraParams傳入其他的參數