Обновление источника начальной загрузки с помощью вызова 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();
}
}

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

  • требуется слишком много обработки на стороне сервера
  • При каждом событии keyUp источник заголовка окна поиска обновляется, но обновленный источник появляется только после следующего события keyUp. Поэтому, если пользователь вводит «je», а затем добавляет «n», вместо того, чтобы видеть только такие рекомендации, как «Дженни, Дженнифер, Дженсон», он также увидит несовпадающие рекомендации, такие как «Джефферсон».
  • Постскриптум На сервере я использую PHP Laravel.

    0

    Решение

    Задача ещё не решена.

    Другие решения

    Других решений пока нет …

    По вопросам рекламы ammmcru@yandex.ru
    Adblock
    detector