文本框输入时 实现自动提示(像百度、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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
Python绘图实现显示中文
2019/12/04 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python os模块在系统管理中的应用
2020/06/22 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
大学生创业项目方案
2014/03/08 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
python实现三次密码验证的示例
2021/04/29 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS