在網(wǎng)頁中使用AutoComplete自動填充的插件很多朦佩，使用網(wǎng)絡搜索漠吻，可以搜到很多jQuery插件征绸，通過本地或者服務器端的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>
當然也支持服務器端的JSON，我們可以在后端做查詢并輸出JSON肋殴，前端代碼如下
<script type="text/javascript">
$( function() {
$("#tags").autocomplete({
source: "/AJAX/Category"
});
} );
</script>
后端做一個查詢囤锉，這個和下面的類似，可以參考下面的后端例程护锤。
使用jQueryUI的缺點就是過于龐大官地，如果你的項目僅僅引用jQueryUI 自動填充而不使用其它jQueryUI 功能的話，會顯得很不劃算烙懦。
我的項目明顯折騰不起jQueryUI這么龐大的插件区丑。
那么就只能繼續(xù)搜索，這個過程其實是有點郁悶的修陡，有的插件太舊了沧侥，居然不兼容比較新的Jquery。有的插件不兼容中文魄鸦。
最后終于找到了jQuery Tokeninput 宴杀，這是一個相對較小功能較強大的插件。通過前面的鏈接下載到jQuery 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)多選等功能。
