使用jquery autocomplete完成自动填充功能。需要引用下面的文件,当然js版本不一定是这个:
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery-ui.css")" />
当然网上也大多数都说需要引用jquery.autocomplete.js这个文件,但是测试发现(使用Chorme浏览器),会出现JS错误:
Uncaught TypeError: Cannot read property 'opera' of undefined(…)
错误位置:jquery.autocomplete.js
$.browser.opera && $(input.form).bind("submit.autocomplete", function() {
使用方法:
1.使用静态数据:
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
2.加载动态数据:
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: '/xxx/xxx/xxx',
// 后台请求路径,mvc
dataType: "json",
data: {
"name": "test"//参数
},
success: function (data) {
data = $.parseJSON(data.Message);
response($.map(data, function (item) { // 此处是将返回数据转换为 JSON对象,并给每个下拉项补充对应参数
return {
// 设置item信息
label: item.DisplayName,// 下拉项显示内容
value: item.DisplayName, // 下拉项对应数值
}
}));
},
error: function (msg) {
}
});
},
minLength: 1,
});