Как мне закрыть всплывающую подсказку после того, как пользователь отправит запрос с помощью Bootstrap3-Typeahead?

Я хочу обеспечить функциональность опережающего ввода с помощью bootstrap3-typeahead.js (который является поддерживаемой вилкой из typeahead.js) с удаленными данными. Однако, когда пользователь быстро вводит и нажимает клавишу ввода, чтобы отправить запрос, всплывающая подсказка все еще отображается. Я подумал, что простой способ решить эту проблему — просто отменить запрос ajax, когда пользователь нажимает клавишу ввода. Однако это не работает.

Судя по отзывам charlietfl, это происходит потому, что запрос получен до того, как пользователь нажмет какую-либо клавишу. Поэтому, возможно, мне нужен другой способ убрать всплывающую подсказку, когда пользователь нажимает клавишу ввода. Я был бы рад получить предложение о том, как это сделать.

Это демонстрация. Если вы быстро наберете, например, «Собака» и нажмете ввод, я якобы прерву запрос, но результаты все равно будут отображаться.

$(document).ready(function() {
    var req;
    $('.typeahead').typeahead(
      {
        name: 'animals',
        display: 'value',
        items: 'all',
        delay: 500,
        source: function(query, process) {
                var url = "http://api.gbif.org/v1/species/match?verbose=true&kingdom=Plantae&name=" + query;
                req = $.get(url, function(data) {
                    data =  $.map(data['alternatives'], function(name) {
                        return {
                            name: name['scientificName']
                        };
                    })
                    process(data);
                });

                return req
            }
      })
      .on('keydown', function(event) {
        console.log('keydown');
        if(event.which == 13) {
          console.log('enter key');
          if (req) {
            console.log('req',req);
            req.abort();
          }
        }
      });
});

С Уважением


javascript xmlhttprequest jquery typeahead.js bootstrap-typeahead
person Robert Smith    schedule 08.07.2016    source источник
comment
Потому что в плагине есть еще один аналогичный обработчик событий. Он поддерживает выбор клавиатуры. Логика того, что вы делаете, не соответствует потоку обработки пользовательского ввода плагина.   -  person charlietfl    schedule 08.07.2016
comment
Можете ли вы уточнить свой ответ немного подробнее? Вы имели в виду, что в bootstrap3-typeahead уже есть возможность отменить запрос после нажатия определенной клавиши?   -  person Robert Smith    schedule 08.07.2016
comment
Нет, я имею в виду, что запросы выполняются до того, как кто-либо нажмет Enter   -  person charlietfl    schedule 08.07.2016
comment
Я понимаю. Что я могу сделать, чтобы не показывать предложения после того, как пользователь отправит запрос?   -  person Robert Smith    schedule 08.07.2016
comment
Без понятия. Не знаю, зачем вам это нужно   -  person charlietfl    schedule 08.07.2016
comment
Раздражает иметь предложения, когда пользователь уже получил результаты. Кстати, даже после применения задержки в 2 секунды я все равно вижу такое же поведение.   -  person Robert Smith    schedule 08.07.2016
comment
Давайте продолжим обсуждение в чате.   -  person Robert Smith    schedule 08.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

На данный момент мне пришлось переключиться на typeahead.js и использовать его функцию typeahead('val', '') для очистки поля ввода сразу после того, как пользователь отправит форму. Таким образом, предложения больше не отображаются.

Однако это не идеальная ситуация, поскольку, как я уже сказал, typeahead.js больше не поддерживается.

Для справки в будущем, причина, по которой я начал использовать bootstrap3-typeahead, заключалась в том, что его было проще настроить без включения его механизма предложений Bloodhound. К сожалению, Bloodhound предлагает методы дросселирования и устранения дребезга, которые очень полезны для получения данных из удаленных источников. В настоящее время я предоставляю аналогичную функциональность с помощью этого приятного трюка (источник: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/):

var timeOutId;

$('.typeahead').typeahead({ // your options
}, {
name: 'someName', 
display: 'value',
source: (query, syncResults, asyncResults) => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
            $.get(my_backend + query, function(data) {
                data =  $.map(data.suggestions, function(suggestion) {
                    return {
                        value: suggestion
                    };
                })
                asyncResults(data);
            });
        }, 750);
}})
person Robert Smith    schedule 09.07.2016