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

Question

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

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

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

$(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(); 
      } 
     } 
     }); 
}); 

С уважением

Answer 1

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

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

Для дальнейшего использования причина, по которой я начал использовать bootstrap3-typeahead, состояла в том, что было проще настроить, не включив в себя его движок Bloodhound. К сожалению, Bloodhound предлагает методы дросселирования и debouncing, которые очень полезны для сбора данных из удаленных источников. В настоящее время, я обеспечиваю схожую функциональность с этим прекрасным трюком (источник: 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); 
}})