http://jqueryui.com/download/ 官网有最新的版本下载和使用方法
下面是我用到写的
下面是asp页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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 id="Head1" runat="server">
<title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtSearch").autocomplete(encodeURI("Handler2.ashx"),
{
minChars: 1, //至少输入的字符数,default:1;如果设为0,在输入框内双击或者删除内容时显示列表。
width: 220, //下拉框的宽度,default:input元素的宽度
max: 30, //下拉项目的个数,default:10
scrollHeight: 300, // 下拉框的高度, Default: 180
scroll: true, //当结果集大于默认高度时,是否使用滚动条,Default: true
multiple: false, //是否允许输入多个值. Default: false
autoFill: false, // 是否自动填充. Default: false
multipleSeparator: " ", //输入多个字符时,用来分开各个的字符. Default: ","
matchCase: false, //是否开启大小写敏感
selectFirst: true, // 如果设置成true,下拉列表的第一个值将被自动选择, Default: true
matchSubset: true, //是否启用缓存
cacheLength: 10, //缓存的长度.即缓存多少条记录.设成1为不缓存.Default: 10
delay: 400, //击键后的延迟时间(单位毫秒).Default: 远程为400 本地10
mustMatch: false, //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除, Default: false
matchContains: true, //决定比较时是否要在字符串内部查看匹配.Default: false
dataType: 'json', //返回的数据类型为JSON类型
parse: function (data) {//解释返回的数据,把其存在数组里
var parsed = [];
for (var i = 0; i < data.length; i++) {
parsed[parsed.length] = {
data: data[i],
value: data[i].bid,
result: data[i].cname //返回的结果显示内容
};
}
return parsed;
},
formatItem: function (item) {//显示下拉列表的内容
return item.cname;
},
formatMatch: function (item) {
return item.cname;
},
formatResult: function (item) {
return item.cname;
}
}).result(function (event, item, formatted) {//把返回的结果内容显示在其他文本框上
$("#ortherid").val(item.bid);
}
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:TextBox ID="ortherid" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
下面是处理程序
<%@ WebHandler Language="C#" Class="Handler2" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Text;
public class Handler2 : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
string strConn = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string cname = context.Request.QueryString["q"];
using (SqlConnection conn = new SqlConnection(strConn))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select top 100 cname,bid from SearchInfo where " +
"cname like '" + cname + "%'";
cmd.Connection = conn;
conn.Open();
SqlDataAdapter dr = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
dr.Fill(ds);
conn.Close();
string strJson = SerializeDataTable(ds.Tables[0]);
context.Response.Write(strJson);
}
}
}
/// <summary>DataTable序列化
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public string SerializeDataTable(DataTable dt)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
foreach (DataRow dr in dt.Rows)//每一行信息,新建一个Dictionary<string,object>,将该行的每列信息加入到字典
{
Dictionary<string, object> result = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
result.Add(dc.ColumnName, dr[dc].ToString());
}
list.Add(result);
}
return serializer.Serialize(list);//调用Serializer方法
}
public bool IsReusable
{
get
{
return false;
}
}
}