使用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 HTML\Javascript

<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);

?>

In your code you have $('#remote .input').typeahead( in the JS. However the input in the div with id remote, has no class input. so it should be $('#msgUser').typeahead(

Edit: This is a piece of my typeahead with a remote ajax call. It has a custom template for the search result so you can skip that part

var producten = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        'cache': false,
        url: 'ajax/htmlProducten.php?q=%QUERY',
        wildcard: '%QUERY',
        filter: function (data) {
            return data;
        }
    }
});
/*data initialiseren */
producten.initialize();
/* Typeahead gedeelte */
$('.typeahead').typeahead(null, {
    name: 'addZoek',
    source: producten.ttAdapter(),
    displayKey: 'artikelNaam',
    templates: { //here starts the custom display setup
        suggestion: function (producten) {
            if(producten.voorraadID!=null) {
                $style="style='color:red'"
            } else {
                $style='';
            }
            if(producten.vers==1){
                $vers='(vers)';
            } else {
                $vers='';
            }
            resultaat= '<div '+$style+'>'+
                '<strong>' + producten.artikelNaam + ' '+$vers+'</strong>' +
                '<br>' + producten.inhoud + ' ' + producten.type + ' - ' + producten.artikelMerk + 
            '</div>';
        }
        return resultaat;
    }
});

Just check if you can do something with this piece of code to make it work for you.

https://github.com/bassjobsen/Bootstrap-3-Typeahead

Apparently the official one from twitter no longer works with bootstrap 3. So I got a new .js file from here and it seems to work with the following code.

<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 data-provide="typeahead" autocomplete="off" name="msgUser" id="msgUser" type="text" class="form-control" placeholder="Users Seperated by ," data-role="tagsinput" />
</div>

<script>
  $('#msgUser').tagsinput({
    typeahead: {
      source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
    }
  });
</script>

But I am still failing to get it to work with my search.php?query file so any further help will be appreciated!