jQuery 插件autocomplete自動完成應用(自動補全)(asp.net后臺)

2024-07-10 13:24:41

字體：大中小

來源：轉載

供稿：網友

autocomplete官網：（可下載jQuery autocomplete插件）。

　　淘寶商品搜索功能效果：

jQuery 插件autocomplete自動完成應用(自動補全)(asp.net后臺)

下面來使用 autocomplete插件來實現類似效果。
1. 創建 AjaxPage.aspx 頁面，在其中定義 WebMethod 方法來返回搜索頁面需要的輸入框所有提示條目。后臺代碼如下：

復制代碼代碼如下:

using System.Collections.Generic;
using System.IO;
using System.Runtime.Serialization.Json;
using System.Web.Services;
public partial class AjaxPage : System.Web.UI.Page
{
[WebMethod]
public static string GetAllHints()
{
Dictionary<string, string> data = new Dictionary<string, string>();
data.Add("蘋果4代iphone正品", "21782");
data.Add("蘋果4代手機套", "238061");
data.Add("蘋果4", "838360");
data.Add("蘋果皮", "242721");
data.Add("蘋果筆記本", "63348");
data.Add("蘋果4s", "24030");
data.Add("戴爾筆記本", "110105");
data.Add("戴爾手機", "18870");
data.Add("戴爾鍵盤", "30367");
DataContractJsonSerializer serializer = new DataContractJsonSerializer(data.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, data);
return System.Text.Encoding.UTF8.GetString(ms.ToArray());
}
}
}

注：該方法返回的數據格式為json字符串。
2. 創建搜索頁面 Index.aspx，前臺代碼如下：

復制代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/jquery.autocomplete.css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
<script type="text/javascript">
var v = 1;
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json",
url: "AjaxPage.aspx/GetAllHints",
data: "{}",
dataType: "json",
success: function (msg) {
var datas = eval('(' + msg.d + ')');
$("#txtIput").autocomplete(datas, {
formatItem: function (row, i, max) {
return "<table><tr><td>" + row.Key + "</td><td><font>約" + row.Value + "個寶貝</font> </td></tr></table>";
},
formatMatch: function(row, i, max){
return row.Key;
}
});
}
});
});
</script>
</head>
<body>
<form runat="server">
<div>
<center>
<asp:TextBox runat="server"></asp:TextBox>
</center>
</div>
</form>
</body>
</html>

實現效果如下：

jQuery 插件autocomplete自動完成應用(自動補全)(asp.net后臺)

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) {
        //如選擇后給其他控件賦值，觸發別的事件等等
    });
作者：Peter