文本框輸入時 實現自動提示（像百度、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);
}
}
運行結果：
相關文章
在web開發(fā)當中，工具提示條對于完善web網站的用戶體驗至關重要。title屬性通常是用來幫助用戶了解顯示鏈接的信息2012-09-09
下面小編就為大家分享一篇解決easyui日期時間框ie的兼容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
更換文章內容與改變字體大小的方法有很多，在本文為大家介紹下使用jquery是如何實現的，感興趣的朋友可不要錯過了2013-09-09
下面小編就為大家?guī)硪黄猨Query ajax讀取本地json文件的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了jQuery仿淘寶網產品品牌隱藏與顯示效果,通過jquery鼠標事件實現頁面元素的顯示與隱藏功能,非常具有實用價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery實現的網頁右下角tab樣式在線客服效果代碼,涉及jQuery簡單樣式變換控制技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了jQuery實時統(tǒng)計輸入框字數及限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了jquery.cookie.js用法,結合實例形式較為詳細的分析了jquery.cookie.js針對cookie的獲取、創(chuàng)建、設置、刪除等常用技巧,需要的朋友可以參考下2015-12-12
jquery插件jquery.nicescroll實現圖片無滾動條左右拖拽的方法
這篇文章主要介紹了jquery插件jquery.nicescroll實現圖片無滾動條左右拖拽的方法,實例分析了jquery.nicescroll插件實現圖片拖拽效果的方法,需要的朋友可以參考下2015-08-08