jquery autocomplete自动完成插件的的使用方法

  首先下载所需文件,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);

  }

  }

  写完之后发现可以实现想要的功能,可是样式老是有问题。显示出来的结果列表挺丑的,好像没有套用上CSS。想了半天也没看出哪的问题来。今天早上猛然发现犯了一个低级错误啊,少写了rel="stylesheet",MY GOD!服了自己了。

  一个简单的例子到此完成了。继续学习。