title: How to use twitter typeahead.js to select an option in a select control from a json array
body: <p>I need to figure out how to use twitter typeahead.js to select an option in a select control from a json array. [this is a bootstrap3 site]</p>
  
  <p>I got typeahead.js working pretty easily almost default:</p>
  
  <pre><code>var countries = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
      url: '[[!~36]]',
      filter: function(list) {
        return $.map(list, function(country) { return { name: country }; });
      }
    }
  });
  
  countries.initialize();
  
  
  $('#scrollable-typeahead .typeahead').typeahead(null, {
    name: 'countries',
    displayKey: 'name',
    source: countries.ttAdapter()
  });
  </code></pre>
  
  <p>the url refers to a modx resource that returns a json formatted array:</p>
  
  <pre><code>[
      {
          "id": 59,
          "label": "fname lname 561280"
      },
  
  ..... shortened .....
  
      {
          "id": 73,
          "label": "fname lname 333333"
      }
  ]
  </code></pre>
  
  <p>and my html looks like: </p>
  
  <pre><code>&lt;span id="scrollable-typeahead"&gt;
  &lt;input type="text" placeholder="Candidate search" class="typeahead form-control input-md" id="typeahead-clients"&gt;
  &lt;/span&gt;
  
  &lt;select id="client_id" name="client_id" class="form-control input-md combobox"  required=""&gt;
      &lt;option value="59"&gt;fname lname 561280&lt;/option&gt;
  ..... shortened .....
      &lt;option value="73"&gt;fname lname 561280&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>So I have 2 problems:</p>
  
  <ol>
  <li><p>the typeahead does not work because the json is an array of arrays, how can I set this up so that the typeahead uses the 'label' for the search and the id to match the option value in the select box?</p></li>
  <li><p>how do I get the typeahead to auto select the matching option in the select box once a user makes their selection?</p></li>
  </ol>
  
  <p>I'm only doing it like that for a fallback if a users browser has issues with the javascript, they can still use the drop down. - if there is a better [cleaner] way to do this please suggest it.</p>