Jquery AutoComplete的使用方法實例

jquery.autocomplete詳解 
語法： 
autocomplete(urlor data, [options] ) 
參數： 
url or data：數組或者url 
[options]：可選項，選項解釋如下： 
1) minChars (Number) 
在觸發autoComplete前用戶至少需要輸入的字符數，Default:1，如果設為0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表。 
2) width (Number) 
指定下拉框的寬度，Default: input元素的寬度 
3) max (Number) 
autoComplete下拉顯示項目的個數，Default: 10 
4) delay (Number) 
擊鍵后激活autoComplete的延遲時間(單位毫秒)，Default: 遠程為400 本地10 
5) autoFill (Boolean) 
要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框，Default: false 
6) mustMatch (Booolean) 
如果設置為true，autoComplete只會允許匹配的結果出現在輸入框,所有當用戶輸入的是非法字符時將會得不到下拉框，Default:false 
7) matchContains (Boolean) 
決定比較時是否要在字符串內部查看匹配，如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false 
8) selectFirst (Boolean) 
如果設置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,盡管它沒被手工選中(用鍵盤或鼠標).當然如果用戶選中某個項目,那么就用用戶選中的值. Default: true 
9) cacheLength (Number) 
緩存的長度.即對從數據庫中取到的結果集要緩存多少條記錄.設成1為不緩存.Default: 10 
10) matchSubset (Boolean) 
autoComplete可不可以使用對服務器查詢的緩存,如果緩存對foo的查詢結果,那么如果用戶輸入foo就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大於1時有效.Default: true 
11) matchCase (Boolean) 
比較是否開啟大小寫敏感開關.使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false 
12) multiple (Boolean) 
是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default:false 
13) multipleSeparator (String) 
如果是多選時,用來分開各個選擇的字符. Default:"," 
14) scroll (Boolean) 
當結果集大於默認高度時是否使用卷軸顯示 Default: true 
15) scrollHeight (Number) 
自動完成提示的卷軸高度用像素大小表示 Default: 180 
16) formatItem (Function) 
為每個要顯示的項目使用高級標簽.即對結果中的每一行都會調用這個函數,返回值將用LI元素包含顯示在下拉列表中.Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的自然數), 當前結果數組元素的個數即項目的個數.Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值. 
17) formatResult (Function) 
和formatItem類似,但可以將將要輸入到input文本框內的值進行格式化.同樣有三個參數,和formatItem一樣.Default: none,表示要么是只有數據,要么是使用formatItem提供的值. 
18) formatMatch (Function) 
對每一行數據使用此函數格式化需要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row 
19) extraParams (Object) 
為后台(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {} 
20) result (handler) Returns:jQuery 
此事件會在用戶選中某一項后觸發，參數為： 
event: 事件對象. event.type為result. 
data: 選中的數據行. 
formatted:formatResult函數返回的值 
例如： 
$("#singleBirdRemote").result(function(event, data, formatted){ 
//如選擇后給其他控件賦值，觸發別的事件等等 
});

 

jquery.autocomplete使用技巧 
1) jquery.autocomplete需要的數據源可以為：本地數據和遠程數據 
本地數據源為本地js數組或本地的json對象，如： 
var data = ["c++","java", "php", "coldfusion","javascript"]; 
var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ]; 
在使用遠程地址時，它默認傳入的參數是：q（輸入值），limit（返回結果的最大值），可以使用extraParams傳入其他的參數，而且遠程數據源是需要固定格式的數據，返回結果：使用“\n”分割每行數據，每行數據中使用“|”分割每個元素，如： 
后台C＃代碼： 

復制代碼代碼如下:

string data = "c++\n java \n php \n coldfusion \n javascript"; 
string data = "{text:'LinkA', url:'/page1'} \n {text:'Link B', url: '/page2'} "; 

4、jquery.autocomplete實例 
1) 本地數據源的調用方法 
方法1： 

$("#tags").autocomplete(["c++","java", "php", "coldfusion","javascript"], { 
width: 320, 
max: 4, 
highlight: false, 
multiple: true, 
multipleSeparator: "", 
scroll: true, 
scrollHeight: 300 
}); 

方法2： 

var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ]; 
$("...").autocomplete(data,{ 
formatItem: function(item) { 
return item.text; 
} 
}).result(function(event,item) { 
location.href = item.url; 
}); 

2) 遠程數據數據源的調用方法 
方法1： 
前台js 

<scripttype="text/javascript"> 
$(document).ready(function() { 
$("#Login").focus().autocomplete("/ajax/Account", { 
formatItem: function(row, i,max) { 
var obj =eval("(" + row + ")"); //轉換成js對象 
return obj.Text; 
}, 
formatResult: function(row) { 
var obj =eval("(" + row + ")"); //轉換成js對象 
return obj.Text; 
} 
}).result(function(event, item) { 
var obj = eval("(" +item + ")"); //轉換成js對象 
$("#link").attr(“href”,obj.url); 
}); 
}); 
</script> 

后台C#（mvc）代碼： 

public ContentResult GetUserAccount(string q) 

{ 
string strResult = ""; 
//...查詢數據操作... 
//...格式化數據... 
//格式完成的結果為 
strResult = "{text:'Link A', url:'/page1'}\n {text:'Link B', url: '/page2'} "; 
return Content(strResult); 
} 

方法2： 
前台js 

<scripttype="text/javascript"> 
$(document).ready(function() { 
$.getJSON("/ajax/Account",function(data) { 
$("#Login").focus().autocomplete(data, { 
formatItem: function(item,i, max) { 
return item.Text; 
}, 
formatResult:function(item) { 
return item.Text; 
} 
}).result(function(event, item){ 
$("#link").attr(“href”,item.url); 
}); 
}); 
}); 
</script>

后台C#（mvc）代碼： 

publicContentResult Account(string q) 
{ 
string strResult = ""; 
//...查詢數據操作... 
//...格式化數據... 
//格式完成的結果為 
strResult = "[{\"text\":\"LinkA\", \"url\":\"/page1\"}, {\"text\":\"LinkB\", \"url\": \"/page2\"} ]"; 
return Content(strResult); 
} 

 

jQuery的Autocomplete（自動完成、自動填充）插件有不少，但比較下來我感覺，還是bassistance.de的JQuery Autocomplete plugin比較強大，我們就來寫一些代碼感受一下。

 

jquery-autocomplete配置：

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
 <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />

 

首先是一個最簡單的Autocomplete（自動完成）代碼片段：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>AutoComplate</title>
     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
     <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
     <script type="text/javascript">
         $(function() {
             var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
 
             $('#keyword').autocomplete(data).result(function(event, data, formatted) {
                 alert(data);
             });
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <input id="keyword" />
         <input id="getValue" value="GetValue" type="button" />
     </div>
     </form>
 </body>
 </html>

result方法是jQuery Autocomplete插件里的重要方法，它在用戶在選定了某個條目時觸發。data參數為選中的數據。

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>自定義提示</title>
     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
     <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
     <script type="text/javascript">
         var emails = [
             { name: "Peter Pan", to: "[e-mail]" },
             { name: "Molly", to: "[e-mail]" },
             { name: "Forneria Marconi", to: "[e-mail]" },
             { name: "Master <em>Sync</em>", to: "[e-mail]" },
             { name: "Dr. <strong>Tech</strong> de Log", to: "[e-mail]" },
             { name: "Don Corleone", to: "[e-mail]" },
             { name: "Mc Chick", to: "[e-mail]" },
             { name: "Donnie Darko", to: "[e-mail]" },
             { name: "Quake The Net", to: "[e-mail]" },
             { name: "Dr. Write", to: "[e-mail]" },
             { name: "GG Bond", to: "[e-mail]" },
             { name: "Zhuzhu Xia", to: "[e-mail]" }
         ];
 
             $(function() {
                 $('#keyword').autocomplete(emails, {
                     max: 12,    //列表里的條目數
                     minChars: 0,    //自動完成激活之前填入的最小字符
                     width: 400,     //提示的寬度，溢出隱藏
                     scrollHeight: 300,   //提示的高度，溢出顯示滾動條
                     matchContains: true,    //包含匹配，就是data參數里的數據，是否只要包含文本框里的數據就顯示
                     autoFill: false,    //自動填充
                     formatItem: function(row, i, max) {
                         return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                     },
                     formatMatch: function(row, i, max) {
                         return row.name + row.to;
                     },
                     formatResult: function(row) {
                         return row.to;
                     }
                 }).result(function(event, row, formatted) {
                     alert(row.to);
                 });
             });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <input id="keyword" />
         <input id="getValue" value="GetValue" type="button" />
     </div>
     </form>
 </body>
 </html>

 

 

$("#txtNo").autocomplete("后台返回json串的一個數據源方法",{
minChars: 1, //最小顯示條數
max: 5, //最大顯示條數
matchCase:false,
matchContains: true,
autoFill: false,
dataType : "json", //指定數據類型的渲染方式
extraParams:{
code:function(){
return $("#txtNo").val();//url的參數傳遞
}
},
parse: function(data){
var rows = [];
var d = data;
for(var i=0; i<d.length; i++){
rows[rows.length] = {
data:d[i],
value:d[i],
result:d[i]
};
}
return rows;
},
formatItem: function(row,i,n) {
return row;
}
}).result (function(event, data, formatted) {
window.location.href='/prct/srch?txtNo='+data; //顯示的頁面哪個值
});
});