html 自动完成 控件,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 data = new Dictionary();

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， 前台代码如下：

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 "

" + row.Key + "

约" + row.Value + "个宝贝

";

},

formatMatch: function(row, i, max){

return row.Key;

}

});

}

});

});

实现效果如下：