title: Bootstrap Typeahead with AJAX source (not working)
body: <p>I'm trying to implement a search bar dropdown using bootstrap v3.0.0 with typeahead.js.
  My search bar will take a student's firstname and lastname. I'm using a MYSQL database which consists of a table called practice with afirstname, alastname, aid as columns. The search bar should not only contain the firstname and lastname in the dropdown, but also the id associated with it in a second row. I've read all the examples on the typeahead.js page and I'm unable to do it with ajax call. </p>
  
  <p>Below is the code of my <b>index.php</b><br><br>
  <strong>JS</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
        $(document).ready(function() {
          $('.cr.typeahead').typeahead({
            source:  header: '&lt;h3&gt;Select&lt;/h3&gt;',
            name: 'accounts',
  
            source: function (query, process) {
                  return $.getJSON(
                      'localhost/resultly/source.php',
                      { query: query },
                      function (data) {
                          return process(data);
                      });
          });
        });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>     &lt;body&gt;
       &lt;div class="container"&gt;
  
       &lt;br/&gt;&lt;br/&gt;
  
      &lt;input type="text" name="query" class="form-control cr typeahead" id="firstname" /&gt;
  
      &lt;br/&gt;&lt;br/&gt;
  
  
  
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Code for <strong>source.php</strong> : This should return the firstname and lastname from my database in the form of a json string or object? </p>
  
  <pre><code>&lt;?php 
      $query = $_POST['query'];
  
      try {
  
  
          $conn = new PDO('mysql:host=localhost;dbname=practice','root','');
          $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
  
          $stmt = $conn-&gt;prepare("SELECT * FROM actualtable WHERE afirstname LIKE '%($query)%'");
          $stmt-&gt;execute();
  
  
  
  
  
      } 
  
      catch (PDOException $e) {
          echo 'ERROR:' . $e-&gt;getMessage();
      }
  
  
  
      foreach ($stmt as $row) {
              $afirstname[] = $row['afirstname'];
              $alastname[] = $row['alastname'];
  
  
      }
  
      echo json_encode($afirstname);
      echo json_encode($alastname);
  
  
   ?&gt;
  </code></pre>
  
  <p>result:
  <a href="http://oi41.tinypic.com/50moi1.jpg" rel="nofollow">http://oi41.tinypic.com/50moi1.jpg</a></p>
  
  <p>Nothing shows up. I've tried adding a <code>prefetch:</code></p>
  
  <pre><code> prefetch: {
                  url: 'localhost/resultly/source.php',
                  filter: function(data) {
                  r1 = [];
                  for (var i = 0;  i &lt; data.length;  i++) {
                  r1.push({
                  value: data[i].afirstname,
                  tokens: [data[i].afirstname, data[i]alastname],
                  afirstname: data[i].afirstname,
                  alastname: data[i].alastname,
                  template: '&lt;p&gt;{{afirstname}} - {{alastname}}&lt;/p&gt;',
                  });
              }
              return r1;
          }
      }
  </code></pre>
  
  <p>Please do provide a solution or an example which I could refer. </p>
  
  <p><strong>Update:</strong> </p>
  
  <p>The source.php should return a list of json encoded data. I debugged by looking at the output that the source.pho created. What I did wrong was whenever I was supposed to put a url I did <code>localhost/source.php</code> instead of just <code>source.php</code>. </p>
  
  <p>Solution provided by Bass Jobsen works and now I have run into another problem. </p>
  
  <p>I'm using 
  <code>if(isset($_POST['query']))
      { $q_uery = $_POST['query'];
       $query = ucfirst(strtolower($q_uery))};</code></p>
  
  <p>to take the user's data and use it for searching logic
  <code>$stmt = $conn-&gt;prepare("SELECT * FROM actualtable WHERE afirstname LIKE '%($query)%'");</code></p>
  
  <p>The updated source.php is <a href="http://pastebin.com/T9Q4m10g" rel="nofollow">http://pastebin.com/T9Q4m10g</a></p>
  
  <p>I get an error on this line saying Notice: Undefined variable: stmt I guess the $query is not being initialized. How do I get this to work. Thanks.</p>
  
  <p><strong>Update 3</strong></p>
  
  <p>I used prefetch: instead of 'remote:' that did all the matching. </p>