在網(wǎng)頁中使用AutoComplete自動填充的插件很多，使用網(wǎng)絡(luò)搜索，可以搜到很多jQuery插件，通過本地或者服務(wù)器端的JSON數(shù)據(jù)，可以很輕松地制作出AutoComplete效果出來。
我一開始是找到了jQueryUI，這個插件也很容易上手，前端加幾個中文進去測試，結(jié)果很快就可以使用。
<script type="text/javascript">
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"我愛北京天安門",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"我是誰",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
插件外接js和CSS即可。
<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
當(dāng)然也支持服務(wù)器端的JSON，我們可以在后端做查詢并輸出JSON，前端代碼如下
<script type="text/javascript">
$( function() {
$("#tags").autocomplete({
source: "/AJAX/Category"
});
} );
</script>
后端做一個查詢，這個和下面的類似，可以參考下面的后端例程。
使用jQueryUI的缺點就是過于龐大，如果你的項目僅僅引用jQueryUI 自動填充而不使用其它jQueryUI 功能的話，會顯得很不劃算。
我的項目明顯折騰不起jQueryUI這么龐大的插件。
那么就只能繼續(xù)搜索，這個過程其實是有點郁悶的，有的插件太舊了，居然不兼容比較新的Jquery。有的插件不兼容中文。
最后終于找到了jQuery Tokeninput ，這是一個相對較小功能較強大的插件。通過前面的鏈接下載到j(luò)Query Tokeninput后，打開壓縮包，將里面的jquery.tokeninput.js、token-input.css、token-input-facebook.css放到你的項目里面就可以了。
在需要自動填充的頁面上，寫下如下代碼：
$(document).ready(function () {
$("#token-courseId").tokenInput("/AJAX/Category", { tokenLimit: 1, hintText: "請輸入你需要的類目名稱", noResultsText: "沒有該類目名稱", searchingText: "搜索中..." });
});
在后端代碼：
public JsonResult Category(string q)
{
object forcn = null;
if (q.Length > 0)
{
forcn= (from d in db.Categories.Where(x=>x.Name.Contains(q)).OrderBy(c => c.Orderby)
select new
{
id = d.CategoryID.ToString(),
name = d.Name
}).ToList();
}
else {
forcn = (from d in db.Categories.OrderBy(c => c.Orderby)
select new
{
id=d.CategoryID.ToString(),
name = d.Name
}).ToList();
}
return Json(forcn, JsonRequestBehavior.AllowGet);
}
如果項目不大的話，選擇Tokeninput實現(xiàn)自動填充是一個很不錯的選擇，它還可以實現(xiàn)多選等功能。
