Использование Twitter’а, чтобы панель поиска работала

Я использую Twitter, чтобы заставить мою панель поиска работать, но сталкиваюсь с некоторыми проблемами.

Назначение панели поиска:

Панель поиска будет использоваться для поиска имен пользователей пользователей, которые зарегистрированы на сайте.

Подход:

в head из home.php:

<script src="typeahead.min.js"></script>

header.php (который включен в home.php):

<input type="text" class="form-control" placeholder="Search user" name="typeahead">

<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>

search.php:

<?php
include("connect.php");

$key=$_GET['key'];
$array = array();
$query = mysqli_query("SELECT * FROM users WHERE username LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query)){
$array[] = $row['username'];
}

echo json_encode($array);
?>

Текущие результаты:

Если с вышеуказанным кодом, на home.php Я пытаюсь найти пользователя Alice, который является реальным пользователем (я, кстати, не нажимаю на поиск, я просто набираю ее имя в строке поиска. Я предполагаю, что если Алиса — реальный пользователь, ее имя будет отображаться в раскрывающемся списке). Но если я поищу ее, URL изменится.

Резюме:
Если я наберу Алису (не нажимаю поиск), ничего не происходит. Я ожидаю, что появится выпадающий список, поскольку Алиса — настоящее имя пользователя.

Если я наберу Алису и ДОЛЖЕН нажать кнопку поиска, URL изменится на:

http://localhost/home.php?typeahead=Alice

Как я ожидаю, что это будет работать:

редактировать:

Другой подход, который я попробовал в header.php:

<input type="text" class="form-control" placeholder="Search user" name="typeahead">

<?php
// getting all usernames from db
$statement = mysqli_prepare ($connect, "SELECT * FROM users WHERE account_type ='user'");
mysqli_stmt_execute($statement);
$usernames = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
$usernames[]       = $get_data['username'];
}
mysqli_stmt_close($statement);
?>

<script>
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;

// an array that will be populated with substring matches
matches = [];

// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');

$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});

cb(matches);
};
};

var username = <?php echo json_encode($usernames); ?>;

$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'usernames',
source: substringMatcher(username)
});
</script>

Следующий подход был принят из Github.

При таком подходе я все еще не получаю выпадающий список, который отображает какие-либо совпадающие имена.