使用Typeahead.js突出顯示多個單詞

Question

我正在使用typeahead.js進行自動補全，就像在這個官方示例中一樣 。

當我搜索“RH”這個結果“ 的Rh頌島”（匹配字符highligted）。

當我搜索“ rh is”時，這將導致“ Rhode Island”（沒有任何突出顯示）。 我該如何工作？ 預期結果：“ 銠頌是土地”。

PS：如果這需要修改源代碼，那么對我來說這是確定的。

Answer 1

默認的typeahead集成突出顯示組件不足以滿足您的要求。

我為您提供了一個示例mark.js ，它是用於搜索詞/關鍵字或自定義正則表達式的文本突出顯示器 。 請訪問該網站以了解有關API的更多信息。

演示JSFIDDLE

 $(function() { // constructs the suggestion engine var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming', 'take bag' ]; var states = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, // `states` is an array of state names defined in "The Basics" local: states }); // Initialize typeahead with mark.js var $context = $("#bloodhound"); $context.find(".typeahead").typeahead({ hint: true, // disable integrated typeahead component highlight: false, minLength: 1 }, { name: 'states', source: states }).on("typeahead:render", function() { // highlight matches with mark.js var searchTerm = $(this).val(); $context.find(".tt-menu").mark(searchTerm); }); }); 

 input { width: 250px; padding: 3px; } mark { background: yellow; color: black; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/jquery.mark.min.js"></script> <script src="https://cdn.rawgit.com/twitter/typeahead.js/v0.11.1/dist/typeahead.bundle.min.js"></script> <!-- Demo taken from http://twitter.github.io/typeahead.js/examples/ --> <div id="bloodhound"> <input class="typeahead" type="text" placeholder="States of USA. Type in 'rh is' or 'bag take'"> </div> 

首先，您必須禁用默認的集成突出顯示組件（默認情況下禁用）。 然后，您必須偵聽renderer事件，並根據typeahead的建議初始化mark.js。

Answer 2

我認為，如果您將\\s模式添加到_.escapeRegExChars()幫助器中使用的正則表達式中（請參見此處 ），它將解決您的問題。

我不確定，因為我不在筆記本電腦上回答問題，也無法進行測試，但是您可以嘗試讓我現在。