文本框输入时 实现自动提示(像百度、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 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
js内置对象 学习笔记
Aug 01 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
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中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
本科生详细的自我评价
2013/09/19 职场文书
公司营业员的工作总结自我评价
2013/10/05 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
活动费用申请报告
2015/05/15 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python