编程 Javascript

文本框输入时实现自动提示（像百度、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一样）

文本框输入时实现自动提示（像百度、google一样）

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

node.js中的console.trace方法使用说明

Dec 09 Javascript

javascript中局部变量和全局变量的区别详解

Feb 27 Javascript

jQuery轻松实现无缝轮播效果

Mar 22 jQuery

vue2.0多条件搜索组件使用详解

Mar 26 Javascript

React Native之ListView实现九宫格效果的示例

Aug 02 Javascript

Angular 2.0+ 的数据绑定的实现示例

Aug 09 Javascript

微信小程序基于canvas渐变实现的彩虹效果示例

May 03 Javascript

通过jQuery学习js类型判断的技巧

May 27 jQuery

vue 插件的方法代码详解

Jun 06 Javascript

解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

Jun 17 Javascript

js实现图片3D轮播效果

Sep 21 Javascript

ES6 十大特性简介

Dec 09 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

文本框输入时 实现自动提示（像百度、google一样）

文本框输入时实现自动提示（像百度、google一样）