首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css。
由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下。
前台代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %> <!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> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script> <link href="Styles/jquery.autocomplete.css" type="text/css" /> <script language="javascript" type="text/javascript"> //直接由数组获得 $(document).ready((function () { var data = ["河北省", "河南省", "山东", "北京", "天津"]; $("#txtProvince").autocomplete(data); //由SERVER端获得 $("#txtUser").autocomplete("GetUserName.aspx"); } )); </script> </head> <body> <form id="form1" runat="server"> <div> 省份:<input id="txtProvince" type="text" /> </div> <div> 用户名:<input id="txtUser" type="text" /></div> </form> </body> </html>
其中用户名部分是从后台读取数据,相应的URL为GetUserName.aspx。该页面的.cs文件为:
protected void Page_Load(object sender, EventArgs e) { //默认传入的键值为q if (Request.QueryString["q"] != null) { string key = Request.Params["q"].ToString(); string result = ""; db db = new db(); string sql = "select UserName from Users where UserName like '" + key + "%'"; SqlDataReader dr = db.GetReader(sql); while (dr.Read()) { result += dr["UserName"].ToString() + "\n"; } if (result == "") result = "not exists"; Response.Write(result); } }