easyui combobox模糊搜索

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>

                                                

原文地址:https://www.cnblogs.com/bunuo/p/9169060.html

时间: 2024-10-12 16:52:02

easyui combobox模糊搜索的相关文章

EasyUI Combobox组合框(模糊搜索、默认值绑定)

EasyUI Combobox组合框是个比较好用的前端组件,例如它支持本地搜索和远程搜索,这样就可以免去自己写模糊查询.基本使用方式如下: <input id="cc" name="dept" value="aa"> $('#cc').combobox({ url:'JsonData.ashx', valueField:'id', //表单值 textField:'text', //表单文本 mode:'local', //本地搜索

easyui combobox 本地数据实现输入中文拼音简码过滤数据

<pre name="code" class="html"><input class="easyui-combobox" name="language" data-options=" data: baseData.emp.ck, width: 105, height: 26, valueField: 'id', textField: 'text', inputCode: 'inputCode', /

easyui combobox开启搜索自动完成功能

combo.json [{ "id":-1, "text":" ", "spell":"" },{ "id":1, "text":"类型1", "spell":"lx1" },{ "id":2, "text":"类型2", "spell&q

jquery easyui combobox 从指定位置开始模糊查询

$("#bzr").combobox({ url: "ClassSave.aspx?opt=bzr&bzr=<%=arrbj[2]%>", valueField: "value", textField: "text", mode: "local", filter: function (q, row) { var opts = $(this).combobox('options'); va

解决easyui combobox不能默认选中

开始出现很奇怪的问题,ff没有问题IE8还是会出现不能选中默认项的问题,更改了select.input的方式,数据加载方式也更改为json的方式,未果,最后将datagrid toolbar的初始化放到了datagrid之后,选中使用了 'selected': 'true', 搞定. 解决easyui combobox不能默认选中

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

jquery easyui combobox 高度自适应

data-options="required:true,editable:false,panelHeight:'auto'"  加上panelHeight:'auto'即可 列合并的情况 columns: [ [ { field: 'nj', title: '年级', width: 80, align: 'center',rowspan:2 }, { field: 'bj', title: '班级', width: 80, align: 'center',rowspan:2 }, {

界面存在多个easyUI Combobox控件时,加载数据失败,或加载不正确

问题原因:当一个界面上有多个easyui ComboBox控件,且在界面加载时同时请求数据.由于数据是异步加载,会导致下拉数据源加载失败,或加载不正确(串数据). 方案一:不用在一开始设定url(data加载路径),在点击控价下拉按钮时再加载数据源. <td>处理类型:</td> <td><input id="handleType" name="handleType" panelHeight="auto"

EasyUI combobox 与 numberbox 属性不可编辑与设置值的使用

今天工作中EasyUI 页面用到的知识点,总结一下: 如下图: 需求: 设置考核价为不可编辑状态,包括考核价的交易币种符号合考核价的金额 考核价的币种和金额从合同价和考核费率数据中获取 考核价的币种同合同价币种一样,考核价金额=合同价金额*考核费率 通过设置disabled属性为true设置考核价币种下拉列表 和  考核价金额文本框 为不可编辑状态 设置考核价币种下拉列表不可编辑: <select id="asseCurrencyID" name="asseCurren