title: How to get output from php to typeahead?
body: <p>I am using twitter typeahead and php as backend for getting data from mysql.But i am not able to see any suggestions when i start typing on the text box. i think because the php output has to be JSON encoded..</p>
  
  <p>how can i encode the output </p>
  
  <p>output:</p>
  
  <pre><code>echo '&lt;a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"&gt;&lt;img src='.$iurl.' class="icons" /&gt;&lt;div class="results" style="color:#696969;text-decoration:none;"&gt;'."$fname".'&lt;/div&gt;&lt;span style="color:#696969;text-decoration:none;" class="author"&gt;'.$caption.'&lt;/span&gt;&lt;/a&gt;'."\n";
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Example of Twitter Typeahead&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script  type="text/javascript" src="../js/typeahead.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('input.typeahead').typeahead({
          name: 'countries',
          prefetch: 'getvalues.php',
          limit: 10
      });
  });  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .bs-example{
      font-family: sans-serif;
      position: relative;
      margin: 100px;
  }
  .typeahead, .tt-query, .tt-hint {
      border: 2px solid #CCCCCC;
      border-radius: 8px;
      font-size: 24px;
      height: 30px;
      line-height: 30px;
      outline: medium none;
      padding: 8px 12px;
      width: 396px;
  }
  .typeahead {
      background-color: #FFFFFF;
  }
  .typeahead:focus {
      border: 2px solid #0097CF;
  }
  .tt-query {
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  }
  .tt-hint {
      color: #999999;
  }
  .tt-dropdown-menu {
      background-color: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      margin-top: 12px;
      padding: 8px 0;
      width: 422px;
  }
  .tt-suggestion {
      font-size: 24px;
      line-height: 24px;
      padding: 3px 20px;
  }
  .tt-suggestion.tt-is-under-cursor {
      background-color: #0097CF;
      color: #FFFFFF;
  }
  .tt-suggestion p {
      margin: 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="bs-example"&gt;
          &lt;input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;         
  </code></pre>
  
  <p>getvalues.php</p>
  
  <pre><code>  &lt;?php
  require_once "config.php";
  $q = strtolower($_GET["q"]);
  if (!$q) return;
  
  $sql = "select file_name,img_url,captions from completer";
  $rsd = mysql_query($sql);
  while($rs = mysql_fetch_array($rsd)) {
      $fname = $rs['file_name'];
      $iurl = $rs ['img_url'];
      $caption = $rs ['captions'];
      echo '&lt;a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"&gt;&lt;img src='.$iurl.' class="icons" /&gt;&lt;div class="results" style="color:#696969;text-decoration:none;"&gt;'."$fname".'&lt;/div&gt;&lt;span style="color:#696969;text-decoration:none;" class="author"&gt;'.$caption.'&lt;/span&gt;&lt;/a&gt;'."\n";
  }
  ?&gt;
  </code></pre>