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

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

0 голосов
/ 29 января 2019

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

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

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

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

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

  1. ItПохоже, что Data Breach позволяет клиенту получить все имена пользователей.
  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 источником заголовка typeahead окна поиска являетсяобновлено, но обновленный источник появляется только после следующего события keyUp.Поэтому, если пользователь вводит «je», а затем добавляет «n», вместо того, чтобы видеть только такие рекомендации, как «Дженни, Дженнифер, Дженсон», он также увидит несовпадающие рекомендации, такие как «Джефферсон».

PS На сервере я использую PHP Laravel.

...