Highlight multiple words using Typeahead.js

Question

I'm using typeahead.js for autocompletion, just like in this official example.

When I search for "rh" this results in "Rhode Island" (the matching characters are highligted).

When I search for "rh is" this results in "Rhode Island" (without any highlighting). How can I get this to work? Expected result: "Rhode Island".

P.S. If this requires modifications to the source code then this is OK for me.

Answer 1

The default integrated highlighting component of typeahead isn't smarth enough to fit your requirement.

I'm giving you an example with mark.js, a text highlighter for search terms/keywords or custom regular expressions. Please have a look at 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.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>

First, you will have to disable the default integrated highlighting component (disabled by default). Then, you'll have to listen for the renderer event and initialize mark.js on the suggestions of typeahead.