文本框输入时 实现自动提示(像百度、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 开天辟地入门篇一
Dec 09 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
JS 实现分页打印功能
May 16 Javascript
js+css实现红包雨效果
Jul 12 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
原生javascript中this几种常见用法总结
Feb 24 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/11/06 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python中调试或排错的五种方法示例
2019/09/12 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
医学院学生的自我评价分享
2013/11/19 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
会计工作决心书
2014/03/11 职场文书
党员承诺书范文
2014/05/19 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
python实现三次密码验证的示例
2021/04/29 Python
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript