jquery autocomplete的使用

最近刚开始学jquery，想实现类似GOOGLE搜索时自动显示出相关结果的效果。于是选择了使用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！服了自己了。

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