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


Posted in Javascript onAugust 07, 2010

首先下载所需文件,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!服了自己了。
一个简单的例子到此完成了。继续学习。
Javascript 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 #Javascript
javascript new fun的执行过程
Aug 05 #Javascript
过虑特殊字符输入的js代码
Aug 05 #Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 #Javascript
javascript new后的constructor属性
Aug 05 #Javascript
FileUpload上传图片(图片不变形)
Aug 05 #Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 #Javascript
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
php遍历目录viewDir函数
2009/12/15 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
php链式操作的实现方式分析
2019/08/12 PHP
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
python正则表达式之作业计算器
2016/03/18 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
vue常用指令代码实例总结
2020/03/16 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
股权投资意向书
2014/04/01 职场文书
建筑节能汇报材料
2014/08/22 职场文书
2014年文员工作总结
2014/11/18 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL
Golang Web 框架Iris安装部署
2022/08/14 Python