easyui combobox 动态加载数组数据详解编程语言

怕自己忘了,记录下来以后用方便

html部分

<input id="rzcode" name="businesItemId"  style="width: 100%; height: 100%;border:none" class="easyui-combobox" data-options=""  />

JS部分

var arrayData = new Array();//创建空数组 
var aryData = new Array();//创建空数组 
$(document).ready(function(){ 
    //先用ajax获取到下拉框全部的数据,并放到数组一里 
    $.ajax({ 
                async:false,//同步加载 
                type:"post", 
                url:"${ctx}/basic/businessItem/list/all?campId=${campId}&groupId=${groupId}", 
                dataType:"json", 
                success: function(data){ 
                    arrayData = data 
                } 
            });   
      //combobox操作 
             $('#rzcode').combobox({ 
         //先把全部数据复制  
                valueField: 'id', 
                textField: 'name', 
                data:arrayData, 
         //数据改变时 
                onChange:function(newValue,oldValue){ 
                    if(newValue != ""){ 
                        for(var i=0;i<arrayData.length;i++){ 
                            var code = arrayData[i].code; 
                            var ss = code.indexOf(newValue); 
                //输入的newValue是否匹配原有数据的code 
                            if(ss != -1){ 
                   //先清空第数组二,再重新放到数组二里 
                                aryData = new Array(); 
                                aryData.push(arrayData[i]) 
                            } 
                        } 
              //修改数据 
                        $(this).combobox("loadData", aryData); 
                    }else{ 
              //如果输入空格,依然还是全部的数据 
                        $(this).combobox("loadData", arrayData); 
                    } 
                     
                },   
});

大体效果

输入空格 或 全部删除后

加载全部

easyui combobox 动态加载数组数据详解编程语言

输入的跟code匹配

easyui combobox 动态加载数组数据详解编程语言

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/17014.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论