文本框输入时 实现自动提示(像百度、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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
原生js实现Flappy Bird小游戏
Dec 24 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
JavaScript实现左右滚动电影画布
Feb 06 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
世界上第一台立体声收音机
2021/03/01 无线电
php发送post请求函数分享
2014/03/06 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
Firefox div高度自适应
2009/04/28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python写入文件自动换行问题的方法
2019/07/05 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
一套.net面试题及答案
2016/11/02 面试题
公司试用期员工自我评价
2014/09/17 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
同学会邀请函模板
2015/01/30 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书