Easy UI combobox实现类似 Select2的效果，下拉带搜索框

一直在开发一个新系统，其中用Easy UI作为前端框架，少不了用 combobox做为一个 下拉控件，它支持 可编辑 模糊本地数据过滤，也可支持 不可编辑 下拉 选择的功能；

$('#ID' ).combobox({
            data: CommonSelect.Return_Company('All'),
            valueField: 'ID',
            textField: 'Company_Name',
            prompt: '选择对应公司',
            editable: false/true
        });

效果就是如下：

 

 

 

 

 

 

 

 但 实际需求中，对于下拉 又不想让他们编辑，但又方便他们查找 下拉数据，这时候 下拉 带搜索的 功能孕育出来了！
Easy UI有组合控件一说，所以得用到这个,实现如下：

$('#ID' ).combobox({
            data: CommonSelect.Return_Company('All'),
            valueField: 'ID',
            textField: 'Company_Name',
            prompt: '选择对应公司',
            editable: false,
            onBeforeLoad: function () {
                var panel = $('#ID' ).combo('panel')
                $("<input type=\"text\" placeholder=\"  输入查询内容\" style=\"width:100%;\" οnkeyup=\"CommonSelect.ChangeData_Company(this)\" />").prependTo($(panel).parent("div"));
            }
        });

CommonSelect.ChangeData_Company = function (Obj) {
var val = Obj.value;
var _CurrData = [];
var _company = CommonSelect.Return_Company();
_company.map(function (elem, index) {
if (elem.Company_Name.indexOf(val) != -1) {
_CurrData.push(elem);
}
});
if (_CurrData.length == 0) {
_CurrData.push({ ID: 0, Company_Name: '-请选择-' });
}
$('#ID').combobox('loadData', _CurrData);
}

效果图：

 

转载于:https://www.cnblogs.com/666qq/p/11511418.html