文本框输入时 实现自动提示(像百度、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 相关文章推荐
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
详解Javascript实践中的命令模式
May 05 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
python简单判断序列是否为空的方法
2015/06/30 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
毕业生求职的求职信
2013/12/05 职场文书
农村党支部先进事迹
2014/01/14 职场文书
学生生病请假条范文
2014/02/16 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
师范生求职信
2014/06/14 职场文书
离职感谢信
2015/01/21 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
员工年度工作总结2015
2015/05/18 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL