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%;\" onkeyup=\"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);
}

效果圖：