jquery的autocomplete

最新推荐文章于 2025-06-27 16:14:11 发布

Jumpy_Fly

最新推荐文章于 2025-06-27 16:14:11 发布

阅读量956

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.NET Jquery

本文链接：https://blog.youkuaiyun.com/a6225301/article/details/8963721

ASP.NET 同时被 2 个专栏收录

69 篇文章

订阅专栏

Jquery

6 篇文章

订阅专栏

本文介绍了如何使用jQuery Autocomplete插件实现类似Google搜索的自动完成效果。通过两个实例展示了从数组和服务器获取数据的方式，并解决了样式应用的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近刚开始学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); 

} 

}