jQuery 外掛autocomplete 應用
專案中有時會用到自動補全查詢，就像Google搜尋框、淘寶商品搜尋功能，輸入漢字或字母，則以該漢字或字母開頭的相關條目會顯示出來供使用者選擇，autocomplete外掛就是完成這樣的功能。
autocomplete官網：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/（可下載jQuery autocomplete外掛）。
淘寶商品搜尋功能 效果：
下面來使用 autocomplete外掛來實現類似效果。
1.建立 AjaxPage.aspx 頁面，在其中定義 WebMethod 方法來返回 搜尋頁面需要的輸入框所有提示條目。 後臺程式碼如下：
1 using System.Collections.Generic;
2 using System.IO;
3 using System.Runtime.Serialization.Json;
4 using System.Web.Services;
5
6 public partial class AjaxPage : System.Web.UI.Page
7 {
8 [WebMethod]
9 public static string GetAllHints()
10 {
11 Dictionary<string, string> data = new Dictionary<string, string>();
12 data.Add("蘋果4代iphone正品", "21782");
13 data.Add("蘋果4代 手機套", "238061");
14 data.Add("蘋果4", "838360");
15 data.Add("蘋果皮", "242721");
16 data.Add("蘋果筆記本", "63348");
17 data.Add("蘋果4s", "24030");
18 data.Add("戴爾筆記本", "110105");
19 data.Add("戴爾手機", "18870");
20 data.Add("戴爾鍵盤", "30367");
21
22 DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
23
24 using (MemoryStream ms = new MemoryStream())
25 {
26 serializer.WriteObject(ms, data);
27 return System.Text.Encoding.UTF8.GetString(ms.ToArray());
28 }
29 }
30 }
注：該方法返回的資料格式為json字串。
2.建立搜尋頁面 Index.aspx， 前臺程式碼如下：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8 <link rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
9 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
10 <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
11 <script type="text/javascript">
12 var v = 1;
13 $(document).ready(function () {
14 $.ajax({
15 type: "POST",
16 contentType: "application/json",
17 url: "AjaxPage.aspx/GetAllHints",
18 data: "{}",
19 dataType: "json",
20 success: function (msg) {
21 var datas = eval('(' + msg.d + ')');
22 $("#txtIput").autocomplete(datas, {
23 formatItem: function (row, i, max) {
24 return "<table width='400px'><tr><td align='left'>" + row.Key + "</td><td align='right'><font style='color: #009933; font-family: 黑體; font-style: italic'>約" + row.Value + "個寶貝</font> </td></tr></table>";
25 },
26 formatMatch: function(row, i, max){
27 return row.Key;
28 }
29 });
30 }
31 });
32 });
33 </script>
34 </head>
35 <body>
36 <form id="form1" runat="server">
37 <div>
38 <center>
39 <asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
40 </center>
41 </div>
42 </form>
43 </body>
44 </html>
實現效果如下：
3.autocomplete 引數說明
*minChars (Number)
在觸發autoComplete前使用者至少需要輸入的字元數.Default: 1，如果設為0，在輸入框內雙擊或者刪除輸入框內內容時顯示列表
*width (Number)
指定下拉框的寬度. Default: input元素的寬度
*max (Number)
autoComplete下拉顯示專案的個數.Default: 10
*delay (Number)
擊鍵後啟用autoComplete的延遲時間(單位毫秒).Default: 遠端為400 本地10
*autoFill (Boolean)
要不要在使用者選擇時自動將使用者當前滑鼠所在的值填入到input框. Default: false
*mustMatch (Booolean)
如果設定為true,autoComplete只會允許匹配的結果出現在輸入框,所有當使用者輸入的是非法字元時將會得不到下拉框.Default: false
*matchContains (Boolean)
決定比較時是否要在字串內部檢視匹配,如ba是否與foo bar中的ba匹配.使用快取時比較重要.不要和autofill混用.Default: false
*selectFirst (Boolean)
如果設定成true,在使用者鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,儘管它沒被手工選中(用鍵盤或滑鼠).當然如果使用者選中某個專案,那麼就用使用者選中的值. Default: true
*cacheLength (Number)
快取的長度.即對從資料庫中取到的結果集要快取多少條記錄.設成1為不快取.Default: 10
*matchSubset (Boolean)
autoComplete可不可以使用對伺服器查詢的快取,如果快取對foo的查詢結果,那麼如果使用者輸入foo就不需要再進行檢索了,直接使用快取.通常是開啟這個選項以減輕伺服器的負擔以提高效能.只會在快取長度大於1時有效.Default: true
*matchCase (Boolean)
比較是否開啟大小寫敏感開關.使用快取時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的快取中去找.Default: false
*multiple (Boolean)
是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false
*multipleSeparator (String)
如果是多選時,用來分開各個選擇的字元. Default: ","
*scroll (Boolean)
當結果集大於預設高度時是否使用卷軸顯示 Default: true
*scrollHeight (Number)
自動完成提示的卷軸高度用畫素大小表示 Default: 180
*formatItem (Function)
為每個要顯示的專案使用高階標籤.即對結果中的每一行都會呼叫這個函式,返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個引數(row, i, max): 返回的結果陣列, 當前處理的行數(即第幾個專案,是從1開始的自然數), 當前結果陣列元素的個數即專案的個數. Default: none, 表示不指定自定義的處理函式,這樣下拉列表中的每一行只包含一個值.
*formatResult (Function)
和formatItem類似,但可以將將要輸入到input文字框內的值進行格式化.同樣有三個引數,和formatItem一樣.Default: none,表示要麼是隻有資料,要麼是使用formatItem提供的值.
*formatMatch (Function)
對每一行資料使用此函式格式化需要查詢的資料格式. 返回值是給內部搜尋演算法使用的. 引數值row
*extraParams (Object)
為後臺(一般是服務端的指令碼)提供更多的引數.和通常的作法一樣是使用一個鍵值對物件.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前使用者輸入了foo). Default: {}
*result (handler)
此事件會在使用者選中某一項後觸發，引數為：
event: 事件物件. event.type為result.
data: 選中的資料行.
formatted:formatResult函式返回的值
例如：
$("#singleBirdRemote").result(function(event, data, formatted) {
//如選擇後給其他控制元件賦值，觸發別的事件等等
});
本文來自部落格園，作者：飛龍在生，轉載請註明原文連結：https://www.cnblogs.com/flzs/p/15716145.html