文本框输入时 实现自动提示(像百度、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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
js命名空间写法示例
Dec 18 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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判断所处服务器操作系统的类型
2013/06/20 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Django中的Model操作表的实现
2018/07/24 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
会展中心部门工作职责
2013/11/27 职场文书
汽车维修求职信
2014/06/15 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书