select2 控件在jquery-ui dialog下无法搜索问题解决

2019独角兽企业重金招聘Python工程师标准>>>

今天，使用select2控件，动态加载select标签的数据，其强大的展示，搜索功能非常好用。

但是在dialog弹出框中，可以选择，但是无法搜索，焦点一直在弹出框的第一个input上。

百度一下找到的解决方法。就是重写一下dialog控件。

 

网上的解决方法如下：

1.问题呈现

项目中使用了jQuery UI的Dialog控件，一般用来处理需要提示用户输入或操作的简单页面。逻辑是修改一个广告的图片和标题。
效果截图如下：

使用Select2，主要是因为它支持下拉式搜索。所以在数据稍微多一点，作为搜索选择功能的首选。但是运行出来之后，发现搜索框无法点击。开始想到的index不够大，被其他的元素覆盖了。但是跳转z-index也无法解决。在普通的页面，搜索框是ok的。

2.解决办法

通过Google搜索，发现select2作者在github上说明了这个问题：

但是他给出解决的方法，我看不太懂，后面也有人说直接修改jQuery UI类库，但是我们项目中使用的jquery-ui-1.10.3.min.js。所以不可能修改jQuery UI的源代码，而已修改源代码，在后期类库升级和维护上，各种坑还是比较多。所以我继续搜索解决版本。在jQuery UI的官网找到了方法。hot fix代码如下：

    hot fix:Select2控件在jQuery UI弹出对话中不能搜索
$.widget("ui.dialog", $.ui.dialog, {
    open: function () {
        return this._super();
    },
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});

根据上面的方法，新建了一个js文件，在jquery_ui.js引入之后引入。

说真的我没看太明白这个方法是做什么的。 _allowInteraction 应该是事件的监听，然后判断是否是select2-input这个属性值，返回true或false。不管了，先放进去再说。

更新后，一访问还是原来的样子，没法搜索。断点调试（我的习惯，不行就调试）。调试发现。$(event.target).is(".select2-input")这个东东一直是false，那就有问题了吧，说明没有这个样式。于是看代码。

果真没有这个样式，于是，改一下。

(function($){
    $.widget("ui.dialog", $.ui.dialog, {
        open: function () {

            return this._super();
        },
        _allowInteraction: function (event) {
            return !!$(event.target).is(".select2-search__field") || this._super(event);
        }
    });
})(jQuery);

再运行一次，OK了。

跟大家分享一下，可能是我用的select2版本与之前作者用的版本不同。大家可试试。

 

转载于:https://my.oschina.net/u/931071/blog/683204