jQuery 外掛程式autocomplete自動完成應用(自動補全)(asp.net後台)

jQuery 外掛程式autocomplete自動完成應用(自動補全)(asp.net後台)_實用技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

autocomplete官網 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下載jQuery autocomplete外掛程式）。

　　淘寶商品搜尋功能效果：

下面來使用 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 rel="Stylesheet" 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 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>";
},
formatMatch: function(row, i, max){
return row.Key;
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<asp:TextBox ID="txtIput" runat="server" Width="400px"></asp:TextBox>
</center>
</div>
</form>
</body>
</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) {
        //如選擇後給其他控制項賦值，觸發別的事件等等
    });
作者：Peter

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery 外掛程式autocomplete自動完成應用(自動補全)(asp.net後台)_實用技巧

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support