解決Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客園Markdown編輯器進行編輯

---

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);
    }
});

3.心得體會

在前端開發中，雖然很多時候為了快速迭代和項目及時上線，我們會使用很多成熟的第三控件或者插件，我們在借助官網api之后，在項目正確的集成它之后，還需要更深入了解它的工作原理和細節。這樣在遇到不可知的bug時，能快速找到問題的根源是關鍵。這也是工作之后，leader或者manager更加強調你發現問題和解決問題的能力。

參考網址：

1.select2在jQuery UI Dialog上的bug
2.jQuery UI allowInteraction方法