EasyUI的combobox控件使用onchange事件之后，输入文本时下拉列表框检索功能不再可用。

comboboxeasyui事件自动补全

解决方案 »

  1.   

    不知道楼主什么版本的easyui，1.3.2测试你的代码没有问题，添加onchange事件自动搜索也能用
      

  2.   


    测试了从1.3.2版到1.4版之间的几个版本，发现从1.3.6版本开始，getValue方法开始返回被选中option的value值，文本框中随意输入文本时(无选中的列表)，返回的是undefined；1.3.2-1.3.5之间的版本全部是返回文本框内输入的值。也就是从1.3.6版开始，绑定事件的问题都有。不知道两者有没有关系。
      

  3.   

    最终决定使用1.3.5版，也实现了自己想要的功能。整体感觉1.4版的比较折腾人，小问题多（也有可能是因为自己技术太烂），老机器用起来也比较卡逼。
    贴出部分代码供大伙拍砖。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="GBK">
        <title>努力让EasyUI不再操蛋……</title>
        <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../demo.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
        <h2>
            实现功能及说明：</h2>
        <div class="demo-info" style="margin-bottom: 10px">
            <div>
                1、单个词组的模糊查询；<br />
                2、onHidePanel事件被触发时自动判断文本框里的值是否有效，无效则清除，同时设置值为null（1.3.6之前的版本当文本框内容无效时默认返回文本框内文本）；<br />
                3、通过“$('#id').combobox('getValue')”和“$('#id').val()”都可以获取当前选中的值；<br />
                4、使用EasyUI1.3.5测试。</div>
        </div>
        <select class="easyui-combobox" name="state" id="state" style="width: 200px;">
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
        <input type="button" value="ShowValue" onclick="showvalue()" />
        <script>
            $("#state").combobox({
                value: null,
                filter: function (q, row) { //q：文本框内你输入的值，row：列表数据集合；
                    var opts = $(this).combobox('options');                //统一转换成小写进行比较；==0：匹配首位，>=0：匹配任意位置；
                    return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
                },
                onHidePanel: function () {
                    //文本框内的文本；
                    var txt_Box = $("#state").combobox('getText');
                    //获取列表数据；
                    var listdata = $.data(this, "combobox");
                    var rowdata = listdata.data;                //遍历列表，若匹配则将值设为当前列并返回；否则将值设为null；
                    for (var i = 0; i < rowdata.length; i++) {
                        var _row = rowdata[i];
                        var txt_Val = _row["text"];
                        if (txt_Val.toLowerCase() == txt_Box.toLowerCase()) {
                            $("#state").combobox('setValue', _row["value"]);
                            $("#state").val(_row["value"]);
                            return;
                        }
                    }
                    //若函数没有返回（即没有与文本框内容匹配的条目），值为null，清空文本框；
                    $("#state").combobox('setValue', null);
                    $("#state").val(null);
                    $("#state").combobox('setText', "");
                }
            });
            $("#state").val(null);
            $("#state").combobox('setText', "");        function showvalue() {
                var gval = $("#state").combobox("getValue");
                var gtxt = $("#state").combobox("getText");
                var val = $("#state").val();
                alert("getValue:" + gval + "\ngetText:" + gtxt + "\nval:" + val);
            }
        </script>
    </body>
    </html>