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！服了自己了。一个简单的例子到此完成了。继续学习。

复制代码代码如下: <script type="text/javascript"> function createArray() { var arr = new Array(); for (var i = 0; i < 10; i++) { arr[i] = function () { return i; } } return arr; } var funcs = creat>>>详细阅读

本文标题：jquery autocomplete自动完成插件的的使用方法

地址：http://www.17bianji.com/kaifa2/JS/25888.html

1/2 1