Теги Twitter Typeahead получают данные из MySQL

Я пытаюсь сделать небольшой ввод тега внутри формы, где я хочу получать данные непосредственно из MySQL.

Я нашел учебник по созданию локальной версии, где данные хранятся в массиве на странице, и это прекрасно работает, но я хотел бы, чтобы он извлекал данные из MySQL на лету.

Я попытался изменить сценарий с локального на удаленный, и мне удалось установить соединение с базой данных MySQL через удаленный файл с помощью Json. Я просто не могу понять, как заставить поиск работать вместе с полем ввода, чтобы Typeahead ( автозаполнение) реагирует на ввод.

Я не оракул в JQuery, но я пытаюсь учиться 🙂

Мой код выглядит так:

tags.php

<!-- Bootstrap styling for Typeahead -->
<link href="/dist/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
<link href="/dist/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<link href="/docs-assets/css/pygments-manni.css" type="text/css" rel="stylesheet">
<link href="/docs-assets/css/docs.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/dist/bootstrap-tokenfield.js" charset="UTF-8"></script>
<script type="text/javascript" src="/docs-assets/js/scrollspy.js" charset="UTF-8"></script>
<script type="text/javascript" src="/docs-assets/js/affix.js" charset="UTF-8"></script>
<script type="text/javascript" src="/docs-assets/js/typeahead.bundle.min.js" charset="UTF-8"></script>

<p><strong>Using Twitter Typeahead</strong></p>
<form class="tagsform" method="post" action="/pages/tagscompile.php">
<div class="form-group">
<input type="text" class="form-control tokenfield-typeahead"  name="tags" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" name="send" value="SEND">
</div>
</form>

<script>
var engine = new Bloodhound({

datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
'cache': false,
url: '/pages/tags_engine.php?q=%QUERY',
wildcard: '%QUERY',
filter: function (data) {
return data;
}
}
});

engine.initialize();

$('.tokenfield-typeahead').tokenfield({
typeahead: [null, { source: engine.ttAdapter() }]
});
</script>

Мой файл tags_engine.php выглядит так:

<?php include($_SERVER['DOCUMENT_ROOT'].'/settings.inc.php');

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select tags as value from tags";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_assoc($rsd)) {
$rows[]=$rs;
}
// I am working on learning MySQLi but until that sticks, this MySQL will do.
print json_encode($rows);
?>

Я действительно ценю твою помощь.