title: Bootstrap typeahead: return html
body: <p>I am trying to return my typeahead results with some html to add links.  I just recently learned about the highlighter function but I'm struggling to return the link properly because I need item.id which is part of my json response.</p>
  
  <p>Here's my script:</p>
  
  <pre><code>$('.lookup').typeahead({
  
    displayText: function(item) {
        return item.label
    },
    afterSelect: function(item) {
        this.$element[0].value = item.value;
         $('#contact_id').val(item.id);
         $('#form_search_contact').submit();
    },
    source: function (query, process) {
      return $.getJSON('ajax_get_json.php', { query: query, what: 'location_autocomplete_contacts' }, function(data) {
        process(data);
      })
    },    
    highlighter: function(item) {
        return ('&lt;a href="ajax_selectcontact.php?contact_id='+item.id+'&amp;redirect_to=index.php"&gt;appt.&lt;/a&gt;-&gt;'+ item);
    }
  
  
  });
  </code></pre>
  
  <p>My json response looks like this:</p>
  
  <pre><code> [{"label":"Contact: Screech Powers-&gt; Powers, Screech: 1980-02-05","value":"Powers, Screech","id":"4258"}]
  </code></pre>
  
  <p>The item.id is not passing into the link I created in my highlighter link.</p>
  
  <p>Also do I still need the display text?  </p>
  
  <p>I'd like to have the display text show as the label only, and then when the user highlights over an option, THEN show the info shown in the highlighter part of the script.  If this isn't possible, I'm ok with only showing the highlighter html.</p>