Выделите несколько слов, используя Typeahead.js

Question

Я использую typeahead.js для автозавершения, как и в this official example.

Когда я ищу «rh», это приводит к «Rh ode Island» (соответствующие символы являются высокопоставленными).

Когда я ищу «rh is», это приводит к «Rhode Island» (без подсветки). Как я могу заставить это работать? Ожидаемый результат: «Rh ode Is земля».

P.S. Если это требует изменений в source code, тогда для меня это нормально.

Answer 1

Интегрированный компонент подсветки typeahead по умолчанию не является достаточно большим, чтобы соответствовать вашим требованиям.

Я даю вам пример с mark.js, текстовым ярлыком для поисковых терминов/ключевых слов или пользовательских регулярных выражений. Посетите веб-сайт, чтобы узнать больше об API.

DEMO 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>

Во-первых, вам придется отключить по умолчанию интегрированный компонент (по умолчанию отключено) подсветка. Затем вам нужно будет прослушать событие рендеринга и инициализировать mark.js по предложениям typeahead.

Answer 2

Я думаю, что если вы добавите \s шаблон регулярному выражению, используемому в _.escapeRegExChars() хелпер (см. here), он решит вашу проблему.

Я не уверен, потому что я не отвечаю с моего ноутбука, и я не могу делать тесты, но вы можете попробовать и позволить мне сейчас.