title: Bootstrap Typeahead: getting data from database as json
body: <p>I'm having issues with getting bootstrap typeahead to return data as a json array from my MySQL database.</p>
  
  <p>Here's what I have so far:</p>
  
  <pre><code>$('.typeahead').typeahead({
      items: 5,
      source: function (query, process) {
          $.ajax({
              url: 'typeahead.php',
              type: 'POST',
              dataType: 'JSON',
              data: 'query=' + query,
              success: function(data) {
                  process(data);
              }
          });
      },
      highlighter: function(data) {
          // decode JSON data and return it here
      },
      updater: function(data) {
          console.log("CLICKED!");
      },
  });
  </code></pre>
  
  <p>And here's the PHP file:</p>
  
  <pre><code>$search_for = $_POST['query'];
  $return = array();
  
  $stmt = $cxn-&gt;prepare('SELECT username, display_name FROM users WHERE username LIKE concat("%", ?, "%") OR display_name LIKE concat("%", ?, "%")');
  $stmt-&gt;bind_param('ss', $search_for, $search_for);
  $stmt-&gt;execute();
  $result = $stmt-&gt;get_result();
  
  while (($row = $result-&gt;fetch_assoc())) {
      array_push($return, array($row['username'], $row['display_name']));
  }
  
  $json = json_encode($return);
  echo $json;
  </code></pre>
  
  <p>And here's the JSON it returns:</p>
  
  <pre><code>[["username","Display Name"],["username2","Display Name 2"]]
  </code></pre>
  
  <p>However, this code doesn't work when I test out the typeahead. It gives the following error in console:</p>
  
  <p><img src="https://i.stack.imgur.com/di5k7.png" alt="http://i.imgur.com/xT8CV2b.png"></p>
  
  <p>So, my question is, how do you properly get multiple pieces of data from a database and put it into a json array?</p>