首页在页面引用以下文件
<!--css-->
<link href="~/Scripts/select2/r_select2_metro.css" rel="stylesheet" />
<!--下拉检索-->
<script src="~/Scripts/select2/select2.min.js"></script>
<script src="~/Scripts/select2/select2_locale_zh-CN.js"></script>
页面代码:
<input type="hidden" id="txtAreaName" name="txtAreaName" class="span12 select2"/>
<input type="hidden" id="hidAreaID" name="hidAreaID"/>
<input type="hidden" id="hidAreaName" name="hidAreaName" value="广州"/>
JS:
//#region select 插件
$('#txtAreaName').select2({
//placeholder: "请输入产品型号",//文本框的提示信息
minimumInputLength: 1,//至少输入n个字符,才去加载数据
multiple: false,//允许单选还是多选
//tags: "true",
//tokenSeparators: [',', ' '],
initSelection: function (element, callback) { // 初始化时设置默认值
var id = $(element).val();
if (id !== "") {
//Get_AreaList是一个模糊查询的方法,返回一个实体,这里记住哦,实体的两个字段必须是id和text,不可以自定义的
$.ajax("/Web/Member/Get_AreaList", {
data: {
q: id
},
dataType: "json"
}).done(function (data) {
callback(data);
});
}
},
formatSelection: function (d) { return d.text; }, // 选择结果中的显示
escapeMarkup: function (markup) { return markup; },
formatResult: function (d) { return "<span>" + d.text + '</span>'; }, // 搜索列表中的显示
ajax: {
url: "/Web/Member/Get_AreaList", // 异步请求地址
dataType: "json", // 数据类型
delay: 250,
data: function (term, page) { // 请求参数(GET)
//keyword = term;
return { q: term, page: page };
},
results: function (data, page) {
//console.log(data);
if (data.Result) {
var tmp = [];
var o = data.Result;
for (var i = 0; i < o.length; i++) {
tmp.push({ id: o[i].id, text: o[i].text });
}
//if (tmp.length == 0) {
// tmp.push({ id: keyword, text: "手动录入" });
//}
return {
results: tmp
};
}
else {
results: ""
}
},
}
});
//当检索框值改变时,同时赋值给页面上的隐藏控件,方便后续做提交/修改操作
$("#txtAreaName").on('change', function (data) {
$("#txtAreaName").val(data.added.text);
$("#hidAreaID").val(data.added.id);
// alert(data.added.id + '。' + data.added.text);
});
//给input 方式给select2赋值
if ($("#hidAreaName").val()) {
var $select = $("#txtAreaName").data("select2");
var svalue = $("#hidAreaName").val();
$select.data({ id: "1", text: svalue });
$("#txtAreaName").val($("#hidAreaName").val());
}
//#endregion
以上到这里就完成啦,可以在输入框里面输入查询的字符,下拉框会模糊查询出对应的数据
以下是select2插件包的下载链接:
http://download.csdn.net/detail/ml01010736/9272727
select方式给下拉框赋默认值:$("#txtAreaName").select2("val",$("#hidAreaName").val());