Bootstrap 2 Typeahead

Show two values in dropdown.

by Alvin Olavarrieta

HTML

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<input type="text" autocomplete="off" class="typeahead">

JavaScript

//http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/
  
  $('.typeahead').typeahead({
    source: function(query, process) {
      states = [];
      map = {};
      
      var data = [
        { "companyName": "Microsoft", "jobs": "5" },
        { "companyName": "Dell", "jobs": "6" },
        { "companyName": "Amazon", "jobs": "22" },
        { "companyName": "Ebay", "jobs": "14" },
        { "companyName": "Apple", "jobs": "1" },
        { "companyName": "Walmart", "jobs": "17" }
      ];

      $.each(data, function(i, state) {
        map[state.companyName] = state;
        states.push(state.companyName);
      });

      process(states);
    },
    updater: function (item) {
        selectedState = map[item].jobs;
        return item;
    },
    matcher: function(item) {
      if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
      	return true;
      }
    },
    sorter: function(items) {
      return items.sort();
    },
    /*highlighter: function(item) {
      var regex = new RegExp('(' + this.query + ')', 'gi');
      return item.replace(regex, "<strong>$1</strong>");
      //return item;
    },*/
     highlighter: function (item) {
       var items = map[item];
       return items.companyName + '<span class="pull-right">' + items.jobs + ' jobs</span>';
    },
  });