JQuery插件autocomplete使用說明文檔


項目中有時會用到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傳入其他的參數


免責聲明!

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



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