天天看点

EasyUI_Combobox输入文本匹配加载下拉框数据

效果如图:

EasyUI_Combobox输入文本匹配加载下拉框数据

每次输入数据去匹配数据库数据,加载到下拉框中。

边输入边加载,通常我们想到的就是文本框的onChange事件,不过这里用onchange,可以实现,但bug就太多了。

每次点击文本框,就会触发datagrid的行单击事件,且每次输入保存后也会触发该事件,处理的东西很多。

改进,我用了loader属性。

valueField: 'id',
 textField: 'text',
 url: "xx",
 mode: "remote", //定义文本改变时读取数据,remote为远程,用户输入的数据以参数名为q的数据请求到服务器,
 queryParams: {          
    // test: "123"<span style="font-family: Arial, Helvetica, sans-serif;">//附带查询参数(开启远程默认传递q,就是输入的内容)</span>
 },
 loader: ComboDataLoader, 
//过滤从远程服务器加载的数据
           

loader加载:

//Combobox过滤从远程服务器加载数据 param:传递的参数,
function ComboDataLoader(param, success, error) {
    //获取combobox输入的值
    var q = param.q;
    if (q == undefined || q == "" || q == null)
        return false;
    $.ajax({
        url: "/xxxx",
        type: "post",
        data: { searchTxt: q },
        dataType: "json",
        success: function (data) {
            //执行loader的success回调函数(装载数据)
            success(data);
        },
        //异常处理
        error: function (xml, text, msg) {
            error.apply(this, arguments);
        }
    });
}
           

这样处理就很方便,根据输入的文本来匹配下拉框的数据。