1. 程式人生 > >chosen.jquery.js 搜尋框只能從頭匹配的解決思路+方法

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

這裡寫圖片描述