文本框輸入時(shí) 實(shí)現(xiàn)自動(dòng)提示（像百度、google一樣）
更新時(shí)間：2012年04月05日 23:27:12 作者：
文本框輸入時(shí) 實(shí)現(xiàn)自動(dòng)提示（像百度、google一樣）,需要的朋友可以參考下
只要有三個(gè)文件：
一個(gè)js插件autocomplete.js和autocomplete.css兩個(gè)文件，這是jquery官方網(wǎng)站提供的插件；
他們的下載地址：http://jqueryui.com/demos/autocomplete/
一個(gè)是一般處理程序 ；
一個(gè)是apsx頁面，看下面的代碼吧;
前臺(tái)：
<script type="text/javascript">
$(document).ready(function() {
ShowUserList($("#TextBox1"), "LoginTest.ashx");
//TextBox1為文本框的ID，loginTest.ashx為請(qǐng)求的一般處理程序。
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>
后臺(tái)是一般處理程序：
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);
}
}
一個(gè)js插件autocomplete.js和autocomplete.css兩個(gè)文件，這是jquery官方網(wǎng)站提供的插件；
他們的下載地址：http://jqueryui.com/demos/autocomplete/
一個(gè)是一般處理程序 ；
一個(gè)是apsx頁面，看下面的代碼吧;
前臺(tái)：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function() {
ShowUserList($("#TextBox1"), "LoginTest.ashx");
//TextBox1為文本框的ID，loginTest.ashx為請(qǐng)求的一般處理程序。
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>
后臺(tái)是一般處理程序：
復(fù)制代碼 代碼如下:
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);
}
}
運(yùn)行結(jié)果：
您可能感興趣的文章:
- 利用jsonp跨域調(diào)用百度js實(shí)現(xiàn)搜索框智能提示
- javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全
- JS仿百度搜索自動(dòng)提示框匹配查詢功能
- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- 仿百度輸入框智能提示的js代碼
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 百度地圖API提示230 錯(cuò)誤app scode碼校驗(yàn)失敗的解決辦法
- JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法
- jQuery UI插件實(shí)現(xiàn)百度提詞器效果
相關(guān)文章
jQuery圖片輪播（二）利用構(gòu)造函數(shù)和原型創(chuàng)建對(duì)象以實(shí)現(xiàn)繼承
本文主要介紹了利用構(gòu)造函數(shù)和原型創(chuàng)建對(duì)象以實(shí)現(xiàn)繼承，并附上完成簡(jiǎn)單輪播對(duì)象的封裝的示例代碼。有興趣的朋友可以看下2016-12-12
這篇文章主要介紹了JQuery遍歷DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery遍歷DOM節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)
<iframe>也應(yīng)該是框架的一種形式，它與<frame>不同的是，iframe可以嵌在網(wǎng)頁中的任意部分。本文給大家介紹jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)，需要的朋友參考下吧2016-04-04
最近的項(xiàng)目中，好幾次用到操作文本域的方法，比如光標(biāo)位置、刪除光標(biāo)前字符等。每次都是查閱資料（這部分操作涉及到的js方法都比較生僻），費(fèi)時(shí)費(fèi)事。于是就封裝了一個(gè)jQuery擴(kuò)展2014-03-03
jQuery層動(dòng)畫定位滑動(dòng)效果的方法
這篇文章主要介紹了jQuery層動(dòng)畫定位滑動(dòng)效果的方法,涉及jQuery中animate方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
jQuery實(shí)現(xiàn)簡(jiǎn)單的輪播圖
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除代碼分享
這篇文章主要介紹了基于jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)添加刪除功能，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
簡(jiǎn)短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
短幾句jquery代碼實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換，需要的朋友可以參考下。2011-09-09
這篇文章主要介紹了JQuery屬性操作與循環(huán)用法,結(jié)合實(shí)例形式分析了jQuery屬性讀取、設(shè)置,以及針對(duì)頁面元素循環(huán)遍歷相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這個(gè)方法把a(bǔ)jax方法封裝一下，方便調(diào)用2008-11-11