github地址: https://github.com/indrimuska/jquery-editable-select
这个插件的原理是把多选框转化为input 并把项列为ul>li的形式
<select id="i_CustomerId_ES" name="CustomerName"></select>
绑定动态数据,根据输入筛选 并获取value和txt
1.初始化editable-select控件
$('#i_CustomerId_ES').editableSelect().on('select.editable-select', function (e, dom) {
//console.log(dom.val() + '' + dom.text());
});
2.由于会解析成input 可以通过给input绑定keydown 或 input时间来监控输入的目的:
$('#i_CustomerId_ES).on('input', function (e) {
bindSc($(this).val()); //调用获取数据的方法
});
3.绑定数据:
var bindSc = function (value) {
var search = value;
$.get('...', { search: search }, function (result) {
$('#i_CustomerId_ES').editableSelect('clear');//清空现有数据
$.each(result, function (i, t) {
$('#i_CustomerId_ES').editableSelect('add', function () {
$(this).val(t.Id);
$(this).text(t.Name);
});//调用add方法 通过函数的方式绑定上val和txt
})
})
以上。
重点方法:
.on('select.editable-select', function (e, dom) {}) //选择后触发
.editableSelect('clear');//清空现有数据
.editableSelect('add', function () {
$(this).val(t.Id);
$(this).text(t.Name);
});//add绑定添加上value txt
输入之后会出现数据框消失的情况,只需将源码中的if (this.$list.find('li').length == hiddens) this.hide();注释掉就好