title: Typeahead and AJAX query doesn't work
body: <p>I'm trying to get <strong>TB Typeahead</strong> working with AJAX results and PHP but can't. See this is the code I made for this:</p>
  
  <pre><code>$('#search').typeahead({
      limit: 10,
      minLength: 2,
      source: function() {
          return $.ajax({
              url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
              type: "GET",
              data: "search=" + $("#search").val(),
              success: function(result) {
                  return result;
              }
          });
      }
  });
  </code></pre>
  
  <p>The result for calling for example with "co" is:</p>
  
  <pre><code>["Combo AMD A4 (14,708.06 BsF)","Combo AMD A8 (17,900.05 BsF)","Combo
  Core i3 (17,200.01 BsF)","Combo Core i5 (20,399.95 BsF)","Combo Intel
  G465 (13,699.99 BsF)","Combo Intel G630 (15,199.97 BsF)"]
  </code></pre>
  
  <p>But options aren't showed, why? What is wrong? Also it's possible to add some way to click in options and go to a specific URL? </p>
  
  <p>I also check <a href="https://stackoverflow.com/questions/15682095/returning-results-for-bootstrap-typeahead">this post</a> and <a href="https://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example">this other too</a> and finally <a href="https://stackoverflow.com/questions/11178512/twitter-bootstrap-typeahead-2-0-4-ajax-error">this other</a> but without results</p>
  
  <p><strong>EDIT</strong> Thanks to the amazing help from @dikirill I get this code working partially:</p>
  
  <pre><code>$('#search').typeahead({
      limit: 10,
      minLength: 2,
      source: function(query, process) {
          $.ajax({
              url: $('base').attr('href') + 'index.php?route=product/search/AjaxProductSearch',
              type: "GET",
              data: "search=" + $("#search").val(),
              success: function(result) {
                  return process(result.names);
              },
              dataType: 'json'
          });
      },
      updater: function(item) {
          var values = $('#search').data('values');
          alert(values);
          for (var index in values) {
              if (values[index].name == item) {
                  location.href = values[index].href;
                  break;
              }
          }
          return item;
      }
  });
  </code></pre>
  
  <p>What isn't working? Well I want when I click any element from typeahead result instantaneously I got redirected to the URL associated to that element. See this PHP function is the function that returns values:</p>
  
  <pre><code>public function AjaxProductSearch() {
      $this-&gt;load-&gt;model('catalog/product');
  
      if (isset($this-&gt;request-&gt;get['search'])) {
          $search = $this-&gt;request-&gt;get['search'];
      } else {
          $search = '';
      }
  
      $output = array();
      if (isset($this-&gt;request-&gt;get['search'])) {
          $data = array(
              'filter_name' =&gt; $search
          );
  
          $product_total = $this-&gt;model_catalog_product-&gt;getTotalProducts($data);
          $results = $this-&gt;model_catalog_product-&gt;getProducts($data);
  
          $output = array();
          foreach ($results as $result) {
              $output['names'][] = $result['name'];
              $output['values'][] = array(
                  'name' =&gt; $result['name'],
                  'href' =&gt; $this-&gt;url-&gt;link('product/product', 'product_id=' . $result['product_id'] . $url)
              );
          }
      }
      echo json_encode($output);
  }
  </code></pre>
  
  <p>Then one result returned is for example this one:</p>
  
  <pre><code>{"names":["Combo AMD A4","Combo AMD A8","Combo Core i3","Combo Core i5","Combo Intel G465","Combo Intel G630"],"values":[{"name":"Combo AMD A4","href":"http:\/\/store.devserver\/amd-a4"},{"name":"Combo AMD A8","href":"http:\/\/store.devserver\/amd-a8"},{"name":"Combo Core i3","href":"http:\/\/store.devserver\/intel-corei3"},{"name":"Combo Core i5","href":"http:\/\/store.devserver\/intel-corei5"},{"name":"Combo Intel G465","href":"http:\/\/store.devserver\/intel-g465"},{"name":"Combo Intel G630","href":"http:\/\/store.devserver\/intel-g630"}]}
  </code></pre>
  
  <p>As you can see I've <strong>names</strong> which allow me to build the typeahead as must be and the other <strong>values</strong> is where I get names associated to href. In others words if I pick <code>Combo AMD A4</code> then I should redirect to <code>href":"http:\/\/store.devserver\/amd-a4</code> and my code isn't working, what is wrong?</p>
  
  <p><strong>EDIT</strong> Live demo is <a href="http://dstore.espiralinfinitoca.com/" rel="nofollow noreferrer">here</a></p>