文本框输入时 实现自动提示（像百度、google一样）
更新时间：2012年04月05日 23:27:12 作者：
文本框输入时 实现自动提示（像百度、google一样）,需要的朋友可以参考下
只要有三个文件：
一个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);
}
}
一个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);
}
}
运行结果：
相关文章
jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
本文主要介绍了利用构造函数和原型创建对象以实现继承，并附上完成简单轮播对象的封装的示例代码。有兴趣的朋友可以看下2016-12-12
这篇文章主要介绍了JQuery遍历DOM节点的方法,实例分析了jQuery遍历DOM节点的相关技巧,需要的朋友可以参考下2015-06-06
<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口)，需要的朋友参考下吧2016-04-04
最近的项目中，好几次用到操作文本域的方法，比如光标位置、删除光标前字符等。每次都是查阅资料（这部分操作涉及到的js方法都比较生僻），费时费事。于是就封装了一个jQuery扩展2014-03-03
这篇文章主要介绍了jQuery层动画定位滑动效果的方法,涉及jQuery中animate方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了jQuery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
基于jquery实现select选择框内容左右移动添加删除代码分享
这篇文章主要介绍了基于jquery实现select选择框内容左右移动添加删除功能，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
短几句jquery代码实现一个图片向上滚动切换，需要的朋友可以参考下。2011-09-09
这篇文章主要介绍了JQuery属性操作与循环用法,结合实例形式分析了jQuery属性读取、设置,以及针对页面元素循环遍历相关操作技巧,需要的朋友可以参考下2019-05-05
这个方法把ajax方法封装一下，方便调用2008-11-11
最新评论