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

miaoyu27 2014-09-14 10:40:33

初次使用EasyUI，请各位大神帮忙看看有没有解决方法。100分俸上。

详细的代码如下：

<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>

    <div id="ZhuaKuang" style="height: 25px; width: 100%;">

    </div>

    <select id="state" class="easyui-combobox" name="state" style="width: 200px; height: 35px;">

        <option value="AL" selected>Alabama</option>

        <option value="AK">Alaska</option>

        <option value="AZ">Arizona</option>

        <option value="AR">Arkansas</option>

    </select>

    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

            $('#state').combobox({

                onChange: function (n, o) {

                    var v = document.getElementById("ZhuaKuang");

                    v.innerHTML = n;

                }

            });

        });

    </script>

</body>

</html>

效果变成下图这个样子，没了自动联想的功能：

但是点击右侧的小箭头，下拉列表是可用的：

将<script language="javascript" type="text/javascript">……</script>中绑定事件的代码删除，是可以正常使用的，效果是下图这个样子：

备注：绑定onSelect、onChange、onHidePanel等事件都会出现这个问题。

...全文

27135 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Heart-Attack 2015-08-27

打赏
举报

你可以通过easyui看一下控件事件它的源代码

陆益达 2015-01-20

打赏
举报

你就是个DB还100分送上

miaoyu27 2014-09-17

打赏
举报

最终决定使用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>

miaoyu27 2014-09-16

打赏
举报

引用 1 楼 showbo 的回复:

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

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

miaoyu27 2014-09-16