Twitter bootstrap – Typeahead with bootstrap tagsinput, mysql

Ok so Iv’e recently been trying to use twitter typeahead along with bootstrap tagsinput which is found here http://timschlechter.github.io/bootstrap-tagsinput/examples/

I wan’t it to send a query to my database and display username’s as I type the input tags which I know is possible because it says so on the tagsinput page linked above. Although I have tried countless way’s of doing it using bloodhound and it just doesn’t seem to be working.

Below is my HTMLJavascript

<form id="msgForm" action="process2.php" method="POST" name="msgForm" class="form-horizontal" role="form">

  <div id="remote" class="input-group" style="padding-bottom:10px;">
    <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span>
    <input type="text" class="form-control" name="msgUser" id="msgUser" placeholder="Users Seperated by ," data-role="tagsinput" />
  </div>

  <script>
    var bestPictures = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      null,
      remote: {
        url: 'search.php?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    $('#remote .input').typeahead(null, {
      name: 'best-pictures',
      display: 'value',
      source: bestPictures
    });
  </script>

  <i><div style="padding-bottom:7;"id="title_message"></div></i>
  <div class="input-group" style="padding-bottom:10px;">
      <span class="input-group-addon"><span class="glyphicon glyphicon-cog"></span></span>
      <input type="text" maxlength="30" class="form-control input-md" autocomplete="off" name="msgTitle" id="msgTitle" placeholder="Message Title"/><br />
  </div>

  <i><div style="padding-bottom:7;"id="main_message"></div></i>
  <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
      <textarea class="form-control" maxlength="500" rows="5" name="main" id="main" placeholder="Your message..."></textarea>
  </div>

  <button type="submit" class="form-control input-md" style="margin-top:20;" name="btnmsg" id="btnmsg">Send Message</button>
</form>

And Here is the php code from search.php:

<?php

include("functions.php");

$param = "{$_GET['query']}%";

// do query
if ($stmt = $con->prepare("SELECT username FROM users WHERE username LIKE ?")) {
    $stmt->bind_param("s", $param);
    $stmt->execute();
}

// populate results
$results = array();

$result = $stmt->get_result();
while ($row = $result->fetch_array(MYSQLI_NUM)) {
  foreach ($row as $r) {
    $results[] = $r;
  }
}

// and return to typeahead
return json_encode($results);

?>