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();注释掉就好