快捷導(dǎo)航

基于jquery的文本框與autocomplete結(jié)合使用(asp.net+json)

更新時間：2012年05月30日 14:28:55 作者：

基于jquery的文本框與autocomplete結(jié)合使用示例代碼，需要的朋友可以參考下

JS腳本引用

 
<script src="/scripts/Jquery.autocomplete/jquery.autocomplete.js" type="text/javascript"></script> 

樣式引用

復(fù)制代碼代碼如下:

 
<style type="text/css" media="all"> 
@import url("/scripts/Jquery.autocomplete/css/jquery.autocomplete.css"); 
</style> 

JS代碼

復(fù)制代碼代碼如下:

 
?$(document).ready(function () { 
$("#<%=_SearchKeyGame.ClientID %>").autocomplete("./AjaxHandle/AutoComplete.ashx?type=game", { 
minChars: 0, 
max: 9, 
width: 150, 
matchContains: true, 
autoFill: false, 
formatItem: function (row, i, max) { 
return row.name; 
}, 
formatMatch: function (row, i, max) { 
return row.name + " "; 
}, 
formatResult: function (row) { 
return row.name; 
} 
}); 
jQuery("#<%=_SearchKeyGame.ClientID %>").result(function (event, data, formatted) { 
if (data) { 
jQuery("#_SearchKeyGame").attr("value", data.name); 
} 
else { 
} 
}); 
$("#<%=_SearchKeyPlat.ClientID %>").autocomplete("./AjaxHandle/AutoComplete.ashx?type=plat", { 
minChars: 0, 
max: 9, 
width: 150, 
matchContains: true, 
autoFill: false, 
formatItem: function (row, i, max) { 
return row.name; 
}, 
formatMatch: function (row, i, max) { 
return row.name + " "; 
}, 
formatResult: function (row) { 
return row.name; 
} 
}); 

AutoComplete。ashx返回JOSON值

復(fù)制代碼代碼如下:

 
string queryStr = context.Request.QueryString["q"]; 
context.Response.ContentType = "text/plain"; 
context.Response.Cache.SetNoStore(); 
string jsponString = "["; 
string where = string.Format(" (select dbo.[f_GetPy](platname)) like '%{0}%' or platname like '%{0}%'", Common.Common.ToSql(queryStr)); 
DataTable dt = new Models.Plat().GetDataTable(where,10); 
if (dt.Rows.Count > 0) 
{ 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
jsponString += "{id:\"" + dt.Rows[i]["PlatID"].ToString() + "\",name:\"" + dt.Rows[i]["PlatName"].ToString() + "\"},"; 
} 
} 
jsponString = jsponString.Trim(new char[] { ',' }); 
jsponString += "]"; 
context.Response.Write(jsponString); 
context.Response.End(); 

您可能感興趣的文章:

相關(guān)文章

基于jquery的修改當(dāng)前TAB顯示標(biāo)題的代碼
在當(dāng)前tab選項(xiàng)卡中單擊鏈接后，新內(nèi)容在當(dāng)前選項(xiàng)卡中顯示，但標(biāo)題內(nèi)容還是上一頁標(biāo)題要改為新的標(biāo)題。
2010-12-12
zTree jQuery 樹插件的使用(實(shí)例講解)
下面小編就為大家?guī)硪黄獄Tree jQuery 樹插件的使用(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jquery判斷字符輸入個數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動截?。?/a>
jquery判斷字符輸入個數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動截取）
2010-10-10

使用jQuery處理AJAX請求的基礎(chǔ)學(xué)習(xí)教程
這篇文章主要介紹了使用jQuery處理AJAX請求的基礎(chǔ)學(xué)習(xí)教程,除此之外還引申了鏈?zhǔn)教幚硎录卣{(diào)的寫法,由淺入深非常值得借鑒,需要的朋友可以參考下
2016-05-05
jquery實(shí)現(xiàn)淡入淡出輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淡入淡出輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery中:file選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:file選擇器用法,實(shí)例分析了:file選擇器的功能、定義及選取類型為file的<input>元素的使用技巧,需要的朋友可以參考下
2015-01-01
jquery實(shí)現(xiàn)左右滑動菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動菜單效果代碼,涉及jquery鼠標(biāo)事件及頁面元素動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)的分子運(yùn)動小球碰撞效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分子運(yùn)動小球碰撞效果,涉及jQuery基于定時函數(shù)操作頁面元素動態(tài)變換的技巧,需要的朋友可以參考下
2016-01-01
jQuery的context屬性用法實(shí)例
這篇文章主要介紹了jQuery的context屬性用法,實(shí)例分析了context屬性返回節(jié)點(diǎn)內(nèi)容的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jquery 動態(tài)創(chuàng)建元素的方式介紹及應(yīng)用
動態(tài)創(chuàng)建元素可以通過兩種方式1、Dom HTml2、JQuery函數(shù)創(chuàng)建3、頁面加載的時候最好在頁面加載完后執(zhí)行創(chuàng)建，感興趣的朋友可以了解下
2013-04-04