Обновление источника начальной загрузки с помощью вызова AJAX для каждого события keyUp в поле поиска

Мое приложение имеет окно поиска для поиска участников по имени пользователя.

Я хочу добавить функцию typeahead в это поле поиска, аналогичное Facebook.

Мне кажется, что есть три варианта:

1. Возвратите все имена пользователей в базе данных и сохраните их в массиве JS, чтобы клиент полностью обрабатывал заголовок.
2. Использование AJAX: создайте XMLHttpRequest для каждого события keyUp и каждый раз обновляйте источник заголовка.
3. Рекомендовать только кэшированные данные.

Проблемы с каждым из вышеперечисленных вариантов:

1. Это похоже на нарушение данных, позволяющее клиенту получить все имена пользователей.
2. Это очень дорого от вычислительной мощности сервера.
3. Это позволяет рекомендовать только ранее найденные элементы.

До сих пор я попробовал второй вариант, используя AJAX. Вот мой код:

<input id="search_query" name="search_query" type="text" class="form-control" autocomplete="off" placeholder="Search" onkeyup="showHint(this.value)">

function showHint(str) {
if (str.length < 3) {
// pending
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {

var hints = JSON.parse(this.responseText);

$("#search_query").typeahead("destroy");
$("#search_query").typeahead({ source: hints });
}
};

var url = '{{ route("search.hints", ["q" => ":q", "table" => ":table"]) }}';
url = url.replace(':q', str);
url = url.replace(':table', tableName);
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
}

Мое текущее решение работает, но есть две проблемы:

Постскриптум На сервере я использую PHP Laravel.