我們用谷歌、百度查東西的時候，浏覽器會根據我們在搜尋框中輸入的關鍵字給出幾個相似的提示項供選擇。
在Asp.net Web開發中有時我們也需要實作這個功能，接下來我們借助jquery插件jquery-ui來達到這種效果，插件官網為：http://jqueryui.com/autocomplete/，大家在下載下傳的時候注意隻選擇autocomplete部分，否則把其他功能的代碼也一并下載下傳下來沒卵用。
引入js、css檔案
<script src="JS/Autocomplete/external/jquery/jquery.js" type="text/javascript"></script>
<script src="JS/Autocomplete/jquery-ui.js" type="text/javascript"></script>
<link href="JS/Autocomplete/jquery-ui.css" rel="stylesheet" type="text/css" />
基本固定資料寫法
<script type="text/javascript">
$(document).ready(function () {
var availableTags = [
"Asp","BASIC","C",
"C++","Java","JavaScript",
"Lisp","Perl","PHP",
"Python","Ruby"
];
$("#autocomplete").autocomplete({
source: availableTags
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
程式設計語言：<input type="text" id="autocomplete" class="ui-widget" />
</div>
</form>
</body>
這個基本例子很簡單，不過有兩個知識點必須了解：
1、文本框提示的内容來源于符合特定格式的靜态資料或動态資料（此處展示的是靜态資料）
2、source的資料源必須是json數組，不能是其他格式的内容，否則沒效果
請求aspx動态擷取source資料
前台代碼：
<script type="text/javascript">
$(document).ready(function () {
var availableTags = [
"Asp","BASIC","C",
"C++","Java","JavaScript",
"Lisp","Perl","PHP",
"Python","Ruby"
];
$.ajax({
type: "POST",
url: "AjaxPage.aspx/GetAllHints",
contentType: "application/json",
//data必須用雙引号引起來
data: "{ action: 'autoComplete', value: 'guo' }",
dataType: "json",
async: false,
success: function (msg) {
//将背景傳回的資料轉換成json數組形式
var datas = JSON.parse(msg.d);
//修改資料源的值
availableTags = datas;
$("#autocomplete").autocomplete({
source: availableTags
});
}
});
});
</script>
aspx背景代碼：
[WebMethod]
public static string GetAllHints(string action,string value)
{
string strResult = "[\"guo\",\"tong\",\"chang\",\"wang\",\"hao\",\"bang\"]";
return strResult;
}
請求ashx動态擷取source資料
前台代碼：
<script type="text/javascript">
$(document).ready(function () {
var availableTags = [
"Asp","BASIC","C",
"C++","Java","JavaScript",
"Lisp","Perl","PHP",
"Python","Ruby"
];
$.ajax({
type: "POST",
url: "Handler1.ashx",
contentType: "application/json",
//data不必用雙引号引起來【不同點1】
data: { action: 'autoComplete', value: 'guo' },
dataType: "json",
async: false,
success: function (msg) {
//不需要将背景傳回的資料轉換成json數組形式【不同點2】
//修改資料源的值
availableTags = msg;
$("#autocomplete").autocomplete({
source: availableTags
});
}
});
});
</script>
兩個不同點指的是從aspx動态擷取資料與從ashx動态擷取資料之間的不同之處。
ashx背景代碼：
public void ProcessRequest(HttpContext context)
{
string strResult = "[\"guo\",\"tong\",\"chang\",\"wang\",\"hao\",\"bang\"]";
context.Response.Write(strResult);
}
插件免費下載下傳位址：http://download.csdn.net/detail/xiaouncle/9616290
![.NET程式員的技能分析參考V1.0(有附件)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)