title: Bootstrap 2.2.1 Typeahead
body: <p>PHP, returns a JSON encoded array</p>
  
  <pre><code>$this-&gt;load-&gt;model('car_model', 'cars');
  $result = $this-&gt;cars-&gt;searchBrand($this-&gt;input-&gt;post('query'));
  $this-&gt;output-&gt;set_status_header(200);
  $this-&gt;output-&gt;set_header('Content-type: application/json');
  $output = array();
  foreach($result as $r)
      $output['options'][$r-&gt;brandID] = $r-&gt;brandName;
  print json_encode($output);
  </code></pre>
  
  <p>Outputs: <code>{"options":{"9":"Audi","10":"Austin","11":"Austin Healey"}}</code> </p>
  
  <p>JS updated:</p>
  
  <pre><code>$(".searchcarBrands").typeahead({
      source: function(query, typeahead) {
          $.ajax({
              url: site_url + '/cars/search_brand/'+query,
              success: function(data) {
                  typeahead.process(data);
              },
              dataType: "json"
          });
      },
      onselect: function(item) {
          $("#someID").val(item.id);
      }
  });
  </code></pre>
  
  <p>UPDATE: Uncaught TypeError: Object function (){return a.apply(c,e.concat(k.call(arguments)))} has no method 'process' </p>
  
  <p>If I type just 'A' then typeahead shows me only the first letter of each result (a bunch of A letters). If I type a second letter I see nothing anymore.</p>
  
  <p>I've tried <code>JSON.parse</code> on the data or using data.options but no luck.</p>
  
  <p>What am I doing wrong?</p>