文本框输入时 实现自动提示(像百度、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的让页面控件不可用的实现代码
Apr 27 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue内置指令详解
2018/04/03 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python requests库用法实例详解
2018/08/14 Python
Django REST framework 分页的实现代码
2019/06/19 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
django form和field具体方法和属性说明
2020/07/09 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
几道PHP面试题
2013/04/14 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
我未来的职业规划范文
2014/01/11 职场文书
教师档案管理制度
2014/01/23 职场文书
人事部专员岗位职责
2014/03/04 职场文书
大学生励志演讲稿
2014/04/25 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
民主生活会意见
2015/06/05 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Vue全家桶入门基础教程
2021/05/14 Vue.js
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL