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 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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
PHP 一个随机字符串生成代码
2010/05/26 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python异常处理例题整理
2019/07/07 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
办理护照介绍信
2014/01/16 职场文书
社区助残日活动总结
2014/08/29 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
前台岗位职责
2015/02/13 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers