title: Bootstrap typeahead: show different text in box once selected
body: <p>I am using bootstrap typeahead to search like this:</p>
  
  <pre><code> $('.lookup').typeahead({
  
  source: function (query, process) {
      return $.getJSON(
          'json_autocomplete.php',{ query: query },
          function (data) {
  
              var newData = [];
                  $.each(data, function(){
  
                      newData.push(this.label);
                      //populate hidden field with id
                      $('#contact_id').val(this.id);
  
                  });
  
              return process(newData);
  
          });
  }
  
   });
  </code></pre>
  
  <p>The JSON data looks like this:</p>
  
  <pre><code> [{"label":"Contact: Jeff Busch-&gt; Busch, Jeff: 1975-11-24","value":"Busch, Jeff","id":"2096"}, ...
  </code></pre>
  
  <p>It is working great.  When the user starts typing the "label" data is shown in a list under the input.  HOWEVER, once the user clicks one of the list items, I want the "value" text to appear in the input text box not all the label info that was searched!</p>
  
  <p>Is this possible?</p>
  
  <p>Here's a fiddle:</p>
  
  <p><a href="http://jsfiddle.net/michels287/qdgo651h/" rel="noreferrer">http://jsfiddle.net/michels287/qdgo651h/</a></p>