Bootstrap typeahed是使用jquery后面的一个字符

Question

我正在使用elasticsearch query（GitHub）来创建搜索表单。用户使用elasticsearch.js输入我正在执行的操作<input type="text" data-provide="typeahead" class="form-control typeahead" id="searchInputId" placeholder="Search" autocomplete="off"> 并返回结果。问题是在typeahead中显示的结果总是落后一个字符，而不是建议正确的值。

预先输入：

var elasticsearchAddress = "exampleserver.com:9200";
var elasticsearchClient = createElasticsearchClient(elasticsearchAddress);

var data = [];
$("#searchInputId").typeahead({ source:data, items:10, fitToElement:true });
$("#searchInputId").on("input", function(){
    var searchTerm = $("#searchInputId").val();
    elasticsearchMathPhrasePrefixSearch(elasticsearchClient, searchTerm, function () {
        $("#searchInputId").data('typeahead').source = getElasticsearchSearchResultsArray();
    });
});

这是我的代码：

elasticsearchMathPhrasePrefixSearch() function

function elasticsearchMathPhrasePrefixSearch(client, searchPhrase, callback) { console.log("Searching for: " + searchPhrase); client.search({ body: { "query": { "match_phrase_prefix": { "accountName": searchPhrase } } } }, function (error, response) { if (error) { console.trace('ELASTICSEARCH: Search query failed'); } else { console.log('ELASTICSEARCH: Search query OK'); var doc = response.hits.hits; elasticsearchSearchResultsArray = getDocs(doc); } callback(); }); }

getDocs() function

function getDocs(doc){ var searchResultsArray=[]; for(var i = 0; i < doc.length; i++){ searchResultsArray.push(doc[i]._source.accountName); } return searchResultsArray;

getElasticsearchSearchResultsArray() function

function getElasticsearchSearchResultsArray(){ return elasticsearchSearchResultsArray; }

elasticsearchSearchResultsArray

var empty = []; $("#searchInputId").typeahead({ source:empty, items:10, fitToElement:true }); $("#searchInputId").on("keyup", function(ev){ ev.stopPropagation(); ev.preventDefault(); //filter out up/down, tab, enter, and escape keys if( $.inArray(ev.keyCode,[40,38,9,13,27]) === -1 ){ var self = $(this); //set typeahead source to empty self.data('typeahead').source = []; //active used so we aren't triggering duplicate keyup events if( !self.data('active') && self.val().length > 0){ self.data('active', true); //Do data request. Insert your own API logic here. var searchTerm = self.val(); elasticsearchMathPhrasePrefixSearch(elasticsearchClient, searchTerm, function() { //set this to true when your callback executes self.data('active',true); //set your results into the typehead's source self.data('typeahead').source = getElasticsearchSearchResultsArray(); //trigger keyup on the typeahead to make it search self.trigger('keyup'); //All done, set to false to prepare for the next remote query. self.data('active', false); }); } } }); 是一个保存结果的全局数组。由于JS异步性质，我没有其他想法让它工作。

修改

好的，我修改了我的代码，以便在Issue #1997的帮助下正确更新源代码。但现在我又遇到了另一个问题。键入时不显示预先输入下拉列表。

我的新代码：

{{1}}

Answer 1

尝试使用on("keyup")代替。输入后面是1个字符。

Answer 2

好的，我自己解决了。我从bootstrap3-typeahead切换到jQuery UI Autocomplete。它工作得很好，脚本也小得多。

新代码：

$("#searchInputId").on("keydown", function () {
            $("#searchInputId").autocomplete({
                source: function(request, response) {
                    var searchTerm = $("#searchInputId").val();
                    elasticsearchMathPhrasePrefixSearch(elasticsearchClient, searchTerm, function (){
                        response(getElasticsearchSearchResultsArray());
                    });
                }
            });
        });