文本框输入时 实现自动提示(像百度、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 jQuery插件练习
Dec 24 Javascript
javascript 三种编解码方式
Feb 01 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
mailto的使用技巧分享
Dec 21 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
Vue如何实现组件间通信
May 15 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设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php 中的closure用法详解
2017/06/12 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python实现数字炸弹游戏程序
2020/07/17 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
《北大荒的秋天》教学反思
2014/04/14 职场文书
党员教师一句话承诺
2014/05/30 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
cf战队宣传语
2015/07/13 职场文书
女性励志书籍推荐
2019/08/19 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript