Geek Answers Handbook

Highlight a few words using Typeahead.js

I use typeahead.js to autocomplete, as in this official example .

When I search for "rh", this leads to " Rh ode Island" (the corresponding characters are highligted).

When I search for "rh is", this leads to "Rhode Island" (no backlight). How can I make this work? Expected Result: " Rh ode Is the Earth."

PS If this requires changes to the source code , then for me this is normal.

+4
source share
2 answers

Typeahead's built-in highlighting component is not large enough by default to fit your requirements.

I will give an example with mark.js , a text label for search queries / keywords or custom regular expressions. Please browse the website to learn more about the 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.imtqy.com/typeahead.js/examples/ --> <div id="bloodhound"> <input class="typeahead" type="text" placeholder="States of USA. Type in 'rh is' or 'bag take'"> </div>

Firstly, you will have to disable the built-in backlight component by default (disabled by default). Then you will need to listen for the renderer event and initialize mark.js in typeahead clauses.

+4
source

I think if you add the \s pattern to the regular expression used in the _.escapeRegExChars() helper (see here ), it will solve your problem.

I am not sure because I am not responding from my laptop and I cannot do the tests, but you can try and let me now.

-one
source

More articles:


All Articles