title: Bootstrap typeahead not working with dynamic array retrieved from a php page
body: <p>I was trying to create a autocomplete box that gets stock symbols and names from finance.yahoo.com according to the user query typed in typeahead text box.</p>
  
  <p>I created a <strong>quote_form.php</strong> page in which there is a text box on which i applied jquery keyup function to get the characters when typed by the user and then based on that characters i made a get request inside my typeahead function on my php page called <strong>symbols.php</strong> which inturn calls this link below:</p>
  
  <p><strong><a href="http://d.yimg.com/aq/autoc?query=" rel="nofollow">http://d.yimg.com/aq/autoc?query=</a>$search&amp;region=US&amp;lang=en-US&amp;callback=YAHOO.util.ScriptNodeDataSource.callbacks</strong></p>
  
  <p>In the above link $search contains the characters received by get request and then in response i received JSON data with some junk i cleared the junk and then made it a legitimate JSON data and from that JSON data i created a string that looks like javascript array with the field i needed from the JSON. So, when my <strong>quote_form.php</strong> receives that data it does not shows it in typeahead. I surely receive data as i have seen in chrome's inspect element's Network tab. The code for both the pages is as below, i have created a seperate html header so i will not include the same as it is not necessary:</p>
  
  <p>I have included the necessary javaScript files and CSS files:</p>
  
  <p><strong>jquery version used: 1.8.2</strong></p>
  
  <p><strong>Bootstrap version used: v2.2.1</strong></p>
  
  <p><strong>quote_form.php</strong></p>
  
  <pre><code>    &lt;script type ="text/javascript"&gt;
      $(document).ready(function () {
      var key;
      $("input[name='symbol']").keyup(function() {
          console.log("Key pressed");
          window.key = $(this).val();
      });
  
      $("input[name='symbol']").typeahead({
          source: function(query, process) {
          return $.get('symbols.php', {s: window.key}, function(data) {
              console.log(data);
              return process(data);
              });
          }
      });
  
  });
  
  &lt;/script&gt;
  
  &lt;form action="quote.php" method="post"&gt;
      &lt;fieldset&gt;
          &lt;div class="control-group"&gt;
              &lt;input id = "sy" autofocus autocomplete ="off" name="symbol" placeholder="Symbol" type="text"/&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
              &lt;button type="submit" class="btn"&gt;Get Quote&lt;/button&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>symbols.php</strong></p>
  
  <pre><code>&lt;?php
      $search = $_GET['s'];
  
      $url = "http://d.yimg.com/aq/autoc?query=$search&amp;region=US&amp;lang=en-US&amp;callback=YAHOO.util.ScriptNodeDataSource.callbacks";
  
      $raw_data =  @file_get_contents($url);
  
      $json = substr($raw_data, strpos($raw_data,'Result"') - 1);
      $json = rtrim($json, '})');
      $json = "{" . $json . "}";
  
      $result = json_decode($json, true);
  
      $jsarr = "[";
      foreach($result as $symbols)
      {
      foreach($symbols as $symbol)
      {
          $jsarr .= "'".$symbol['name'] . " " . $symbol['symbol'] . "', ";
      }
      }
  
      $jsarr .= "]";
  
      echo $jsarr;
  ?&gt;
  </code></pre>
  
  <p>I also tried the above code without converting to JavaScript array i.e i also tried with JSON only but that didn't work either. Seen many examples on internet also but still i am missing something don't know what. If any body can figure out what i am doing wrong that would be a great relief for me.</p>
  
  <p>Thanks in advance.</p>