使用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()帮助器中使用的正则表达式中（请参见此处 ），它将解决您的问题。

我不确定，因为我不在笔记本电脑上回答问题，也无法进行测试，但是您可以尝试让我现在。