title: twitter bootstrap typeahead not working
body: <p>I am working on twitter bootstrap typeahead and i am stuck as i am not getting any error and yet the auto complete is not working. </p>
  
  <p>this is my input field</p>
  
  <pre><code>&lt;input type="text" id="autocomplete" /&gt;
  </code></pre>
  
  <p>and this is my script</p>
  
  <pre><code>&lt;script&gt;
      $('#autocomplete').typeahead({
              source: function(process) {
                  var data =  &lt;?php Widgets::allProducts() ?&gt;;
                  process(data);
          },
  
          matcher: function(item) {
  
              return
              item.name.toLocaleLowerCase()
                  .indexOf(this.query.toLocaleLowerCase()) != -1;
  
          },
          highlighter: function(item) {
              return item.name;
  
          },
          updater: function (item) {
              alert(JSON.parse(item).value);
              return JSON.parse(item).name;
  
          }
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>this is how my <code>var data</code> looks like </p>
  
  <pre><code>var data =  [{"name":"Acne.org","id":"5"},{"name":"AcneFree","id":"6"},{"name":"Alpha Hydrox","id":"16"},{"name":"AmLactin","id":"17"},{"name":"Astara","id":"21"}];
  </code></pre>
  
  <p>What i want to do is get the product name listed (which is <code>name</code> in <code>var data</code> ) and upon selecting the product redirect the user to product page (with the help of product id which i am getting in <code>var data</code> as <code>id</code>). </p>
  
  <p>I am just lost at this stage as i am not getting any error. I will appreciate any push to right direction.</p>