Question

我想通过使用bootstrap3-typeahead.js（这是typeahead.js的维护分支）和远程数据来提供预先输入功能。但是，当用户快速键入并按Enter键提交查询时，工具提示仍会显示。我认为解决这个问题的一个简单方法是在用户按下回车键时取消ajax请求。但是，这不起作用。

根据charlietfl的反馈，这是因为在用户按下任何键之前收到请求。因此，当用户按下回车键时，我可能需要另一种方法来删除工具提示。我很乐意收到有关如何实现这一目标的建议。

这是demo。如果您快速键入“Dog”并按Enter键，我可能会中止请求，但结果仍然显示。

$(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提供了限制和去抖动方法，这些方法对于从远程数据源获取数据非常有用。目前，我提供了类似功能的这个好技巧（来源：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);
}})

用户使用Bootstrap3-Typeahead提交查询后，如何关闭工具提示？

1 个答案: