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

 更新时间:2010年08月07日 16:18:48   转载 作者:  
最近刚开始学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!服了自己了。
一个简单的例子到此完成了。继续学习。

相关文章

  • jQuery如何获取动态添加的元素

    jQuery如何获取动态添加的元素

    这篇文章主要介绍了jQuery如何获取动态添加的元素的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 使用jquery实现放大镜效果

    使用jquery实现放大镜效果

    相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。那么接下来,我们将向大家介绍通过jQuery实现放大镜效果。
    2014-09-09
  • jQuery EasyUI 组件加上“清除”功能实例详解

    jQuery EasyUI 组件加上“清除”功能实例详解

    在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常会遇到下拉框或日期只允许选择、不允许手动输入功能,怎么解决呢,下面小编给大家分享解决方案,一起看看吧
    2017-04-04
  • jQuery 源码分析笔记(2) 变量列表

    jQuery 源码分析笔记(2) 变量列表

    在初始化jQuery对象的代码开始之前声明了一大堆变量。主要包括:全局变量的备份;处理字符串用的正则表达式;检测浏览器的正则表达式;对核心函数的引用备份。这里略过大部分,只说两种:全局变量和浏览器检测。
    2011-05-05
  • 使用jQuery给Table动态增加行、清空table的方法

    使用jQuery给Table动态增加行、清空table的方法

    这篇文章主要介绍了使用jQuery给Table动态增加行、清空table的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • jquery 表单取值常用代码

    jquery 表单取值常用代码

    在jquery中经常需要获取form表单的一些值,下面是常用的代码,需要的朋友可以参考下。
    2009-12-12
  • 深入分析jQuery.one() 函数

    深入分析jQuery.one() 函数

    这篇文章主要介绍了jQuery.one() 函数的用法,文中通过示例代码帮助大家更好的学习,感兴趣的朋友可以参考一下
    2020-06-06
  • web的各种前端打印方法之jquery打印插件jqprint实现网页打印

    web的各种前端打印方法之jquery打印插件jqprint实现网页打印

    本文介绍JQuery插件Jqprint实现网页打印,不懂的同学正可借此机会学习下,以备不时之需,话不多说,切入主题
    2013-01-01
  • JQuery与JSon实现的无刷新分页代码

    JQuery与JSon实现的无刷新分页代码

    相信大家都上过优酷吧,当你在看一个视频的时候,你想看看视频下面的评论,点击了第2页的评论,整个页面刷新,那么视频从头开始播放,相信这会被用户骂死的。
    2011-09-09
  • jQuery Raty星级评分插件使用方法实例分析

    jQuery Raty星级评分插件使用方法实例分析

    这篇文章主要介绍了jQuery Raty星级评分插件使用方法,结合实例形式分析了jquery Raty星级评分插件的下载、调用、基本属性及相关使用技巧,需要的朋友可以参考下
    2019-11-11

最新评论