文本框输入时 实现自动提示(像百度、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 get和post 方法传值注意事项
Nov 03 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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.ini中文版
2006/10/09 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python打开网页和暂停实例
2014/09/30 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python 装饰器的使用示例
2020/10/10 Python
C语言面试题
2013/05/19 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
2014年端午节演讲稿范文
2014/05/23 职场文书
党员四风剖析材料
2014/08/27 职场文书
导游欢送词
2015/01/31 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年质检工作总结
2015/05/04 职场文书
推广普通话的宣传语
2015/07/13 职场文书