JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input class="typeahead" type="text" data-provide="typeahead">

CSS

span {display: block; color: #666;}

JavaScript

var $input = $(".typeahead");
$input.typeahead({
  source: [
    {id: "1", name: "Город 1", reg: "Регион 1"},
    {id: "2", name: "Город 2", reg: "Регион 2"}
  ],
  autoSelect: true,
  displayText: function(item) {
  	return item.name + '<span>' + item.reg + '</span>';
  },
  highlighter: function(item) {
        var query = this.query;
        if(!query) {
            return '<div> ' + item + '</div>';
        }

        var reEscQuery = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
        var reQuery = new RegExp('(' + reEscQuery + ')', "gi");

        var jElem = $('<div></div>').html(item);
        var textNodes = $(jElem.find('*')).add(jElem).contents().filter(function () { return this.nodeType === 3; });
        textNodes.replaceWith(function() {
            return $(this).text().replace(reQuery, '<strong>$1</strong>')
        });

        return jElem.html();
    }
});
$input.change(function() {
  var current = $input.typeahead("getActive");
  if (current) {
    // Some item from your model is active!
    if (current.name == $input.val()) {
      // This means the exact match is found. Use toLowerCase() if you want case insensitive match.
    } else {
      // This means it is only a partial match, you can either add a new item
      // or take the active if you don't want new items
    }
  } else {
    // Nothing is active so it is a new value (or maybe empty value)
  }
});