jQuery UI Autocomplete 的插件官方文档：http://jqueryui.com/demos/autocomplete/
jQuery UI Autocomplete 的下载地址：http://jqueryui.com/download
前台html代码
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
<link type="text/css" rel="Stylesheet" href="Styles/jquery.autocomplete.css" />
<script type="text/javascript">
$(function () {
var selector = $("#TextBox1");
selector.autocomplete(
{
minLength: 1,
source: function (request, response) {
$.ajax({
url: "Getdrug.ashx?key=" + encodeURI(selector.val()),
dataType: "json",
data: request,
success: function (data) {
response(data);
}
});
},
select: function (event, ui) {
alert("你选择的是:label:" + ui.item.label + " value:" + ui.item.value);
selector.val(ui.item.label);
alert(selector.val());
return false;
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
后台Ajax代码
View Code
/// <summary>
/// Summary description for Getdrug
/// </summary>
public class Getdrug : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string key = context.Request.QueryString["key"];
if (!string.IsNullOrEmpty(key))
{
List<Drug> drugs = new List<Drug>();
drugs.Add(new Drug() { value = 1, label = "yy" });
drugs.Add(new Drug() { value = 2, label = "xx" });
drugs = drugs.Where(t => t.label.Contains(key)).ToList();
string result = Newtonsoft.Json.JsonConvert.SerializeObject(drugs);
context.Response.ContentType = "text/plain";
context.Response.Write(result);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Drug
{
public int value { get; set; }
public string label { get; set; }
}