chosen.jquery.js 搜索框只能從頭匹配的解決思路+方法

心急者請直接看下方 總結 ,由於本問題未能找到直接答案，所以只能通過修改源碼解決。故將修改源碼思路貼出來供大家參考，在遇到其他改源碼問題時應如何思考。

chosen.jquery.js（地址：http://harvesthq.github.io/chosen）是一款非常優秀的表單select框美化插件。它提供了一些非常實用的功能。但是在實用中卻又有一些問題。

搜索從頭匹配問題

首先，我們初始化一個chosen實例：

html：

 <select data-placeholder="選擇省份..." class="chosen-select" style="width:350px;" tabindex="2">
   <option value="">請選擇省份</option>
   <option value="110000" hassubinfo="true">北京</option>
   <option value="120000" hassubinfo="true">天津</option>
   <option value="130000" hassubinfo="true">河北省</option>
   ...
</select>

js:

<script type="text/javascript">
    $(function(){
        $(".chosen-select").chosen();
    })
</script>

初始化完成後效果如圖：

在輸入框填入關鍵詞搜索：

可以發現關鍵詞只能從頭匹配，因此只搜索出 北京，河北省卻未被搜索出。

解決

可以想到上述問題應該是正則匹配的問題，只需找到搜索時的匹配正則並修改，便可以達到我們想要的目的。

通過審查元素可以看到：

插件實例化時有插件內置class：active-result.
所以，打開chosen.jquery.js源碼，查找 active-result.

可以發現這個方法，result_add_option,顯然是將數據填入新生成的插件select彈出框中的方法。
繼續搜索 result_add_option,看看哪裏調用了這個方法發現：

明顯是生成option對象的方法。

繼續搜索，看看在哪裏調用：

發現這個方法。在本方法內，可以發現

這便是搜索匹配語句。

console.log(regex);

發現它是從頭匹配的正則：

發現源碼中挨着regex便定義了正則zregex：

而zregex 便是我們需要的正則。故將插件源碼340行 regex 替換成 zregex即可達到目的。

總結

故將插件源碼340行 regex 替換成 zregex。或搜索regex定位到如下一行：

將regex 替換成 zregex。 效果：

TO