select2 控件在jquery-ui dialog下沒法搜索問題解決

今天，使用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版本與以前做者用的版本不一樣。你們可試試。