文本框输入时 实现自动提示(像百度、google一样)


Posted in Javascript onApril 05, 2012

只要有三个文件:
一个js插件autocomplete.js和autocomplete.css两个文件,这是jquery官方网站提供的插件;
他们的下载地址:http://jqueryui.com/demos/autocomplete/

一个是一般处理程序 ;
一个是apsx页面,看下面的代码吧;
前台:

<script type="text/javascript"> 
$(document).ready(function() { 
ShowUserList($("#TextBox1"), "LoginTest.ashx"); 
//TextBox1为文本框的ID,loginTest.ashx为请求的一般处理程序。 
function ShowUserList(obj, url) { 
$.getJSON( 
url, 
function(msg) { 
var names = new Array(); 
msg = msg.Table; 
var names = new Array(); 
for (var i = 0; i < msg.length; i++) { 
names.push(msg[i].loginName); 
} 
obj.focus().autocomplete(names); 
} 
); 
} 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
用户名:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
<asp:Button ID="Button1" runat="server" Text="登录" /> 
</div> 
</form> 
</body>

后台是一般处理程序:
public class LoginTest : IHttpHandler 
{ 
string str; 
public void ProcessRequest(HttpContext context) 
{ 
getUserName(); 
context.Response.Write(str); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
private void getUserName() 
{ 
DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text); 
str = ConvertJson.ToJson(ds); 
} 
}

运行结果:
文本框输入时 实现自动提示(像百度、google一样) 

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 #Javascript
jQuery之$(document).ready()使用介绍
Apr 05 #Javascript
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
You might like
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jquery 使用简明教程
2014/03/05 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python中存取文件的4种不同操作
2018/07/02 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
求职自荐信格式
2013/12/04 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
倡议书格式
2014/04/14 职场文书
结婚保证书范文
2014/04/29 职场文书
中考学习决心书
2015/02/04 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
《绝招》教学反思
2016/02/20 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android