本文使用博客園Markdown編輯器進(jìn)行編輯

---

1.問題呈現(xiàn)

項(xiàng)目中使用了jQuery UI的Dialog控件，一般用來處理需要提示用戶輸入或操作的簡單頁面。邏輯是修改一個(gè)廣告的圖片和標(biāo)題。
效果截圖如下：

使用Select2，主要是因?yàn)樗С窒吕剿阉鳌Ｋ栽跀?shù)據(jù)稍微多一點(diǎn)，作為搜索選擇功能的首選。但是運(yùn)行出來之后，發(fā)現(xiàn)搜索框無法點(diǎn)擊。開始想到的index不夠大，被其他的元素覆蓋了。但是跳轉(zhuǎn)z-index也無法解決。在普通的頁面，搜索框是ok的。

2.解決辦法

通過Google搜索，發(fā)現(xiàn)select2作者在github上說明了這個(gè)問題：

但是他給出解決的方法，我看不太懂，后面也有人說直接修改jQuery UI類庫，但是我們項(xiàng)目中使用的jquery-ui-1.10.3.min.js。所以不可能修改jQuery UI的源代碼，而已修改源代碼，在后期類庫升級和維護(hù)上，各種坑還是比較多。所以我繼續(xù)搜索解決版本。在jQuery UI的官網(wǎng)找到了方法。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.心得體會(huì)

在前端開發(fā)中，雖然很多時(shí)候?yàn)榱丝焖俚晚?xiàng)目及時(shí)上線，我們會(huì)使用很多成熟的第三控件或者插件，我們在借助官網(wǎng)api之后，在項(xiàng)目正確的集成它之后，還需要更深入了解它的工作原理和細(xì)節(jié)。這樣在遇到不可知的bug時(shí)，能快速找到問題的根源是關(guān)鍵。這也是工作之后，leader或者manager更加強(qiáng)調(diào)你發(fā)現(xiàn)問題和解決問題的能力。

參考網(wǎng)址：

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

總結(jié)

以上是生活随笔為你收集整理的解决Select2控件不能在jQuery UI Dialog中不能搜索的bug的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。