1. 程式人生 > >easyui combobox模糊搜索

easyui combobox模糊搜索

require clas 分享圖片 options con sig nbsp AR tex

combobox實現模糊搜索功能

<input class="easyui-combobox" id="hybq_PADD" name="hybq_PADD"
                        data-options="valueField:‘id‘,textField:‘text‘,required:true,  
                        panelHeight:‘auto‘,    panelMaxHeight:200,panelMinHeight:100"
                            validType="name[0,60]"
style="width: 300px; height: 24px;" type="text" />
    <script>
    var comboboxData = [{id:‘1‘,text: ‘abc‘},{id:‘2‘,text: ‘bca‘},{id:‘3‘,text: ‘cba‘},{id:‘4‘,text: ‘cas‘},{id:‘5‘,text: ‘asd‘}];
    var comboboxValue = [];
    $(‘#hybq_PADD‘).combobox({  
        
//prompt:‘輸入首關鍵字自動檢索‘, data: comboboxData, //url:‘${path }/portal/designer/tree‘, editable: true, multiple: true, hasDownArrow: false, formatter: function (row) { var opts = $(this).combobox(‘options‘); console.log(row) console.log(
"發: "+row[opts.textField]) return ‘<input type="checkbox" class="combobox-checkbox">‘ + row[opts.textField] }, onShowPanel: function () { var opts = $(this).combobox(‘options‘); var target = this; var values = $(target).combobox(‘getValues‘); $.map(values, function (value) { var el = opts.finder.getEl(target, value); el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, true); }) }, onLoadSuccess: function () { var opts = $(this).combobox(‘options‘); var target = this; var values = $(target).combobox(‘getValues‘); $.map(values, function (value) { var el = opts.finder.getEl(target, value); el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, true); }) //綁定失焦事件 $(‘#hybq_PADD‘).next(‘.combo‘).find(‘input‘).blur(function (){ var val = $(this).val() if(val != ‘‘) { val = val.trim(); var arr = val.split(‘,‘); var newArr = []; for(var j = 0; j < arr.length; j++) { for(var i = 0; i < comboboxData.length; i++) { if(comboboxData[i][opts.textField] == arr[j]) { newArr.push(arr[j]); } } } $(‘#hybq_PADD‘).combobox("setValues",$(‘#hybq_PADD‘).combobox("getValues")) } }); }, onSelect: function (row) { var opts = $(this).combobox(‘options‘); var el = opts.finder.getEl(this, row[opts.valueField]); el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, true); }, onUnselect: function (row) { var opts = $(this).combobox(‘options‘); var el = opts.finder.getEl(this, row[opts.valueField]); el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, false); }, filter: function(text, row) { var opts = $(this).combobox(‘options‘); var el = opts.finder.getEl(this, row[opts.valueField]); if(text != ‘‘ && row[opts.textField].indexOf(text) == 0) { el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, false); } for ( var r in row) { if(row[opts.textField].indexOf(text) == 0 && row[opts.textField] == text) { el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, true); break; } } return row[opts.textField].indexOf(text) == 0; }, onChange: function(newValue, oldValue) { comboboxValue = newValue; var opts = $(this).combobox(‘options‘); var data = $(this).combobox(‘options‘).data; for(var j = 0; j< data.length; j++) { var el = opts.finder.getEl(this, data[j][opts.valueField]); el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, false); } for(var i = 0; i < newValue.length; i++) { var el = opts.finder.getEl(this, newValue[i]); el.find(‘input.combobox-checkbox‘)._propAttr(‘checked‘, true); } } }); </script>

技術分享圖片 技術分享圖片

easyui combobox模糊搜索