Bootstrap typeahed是一个字符后使用jquery

Bootstrap typeahed is one character behind using jquery

本文关键字:字符 jquery 一个 typeahed Bootstrap      更新时间:2023-09-26

我使用bootstrap typeahead (GitHub)创建搜索表单。在用户输入一些东西后,我使用elasticsearch.jselasticsearch query并返回结果。问题是提前输入显示的结果总是落后一个字符,而不是提示正确的值。

Typeahead输入:

<input type="text" data-provide="typeahead" class="form-control typeahead" id="searchInputId" placeholder="Search" autocomplete="off">
下面是我的代码:
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是保存结果的全局数组。由于JS的异步性质,我没有其他的想法使它工作。

编辑:

好的,我修改了我的代码,使源代码在这个问题#1997的帮助下正确更新。但现在我又遇到了另一个问题。

输入 时不显示typeahead下拉菜单。

新代码:

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

尝试使用on("keyup")代替。

好吧,我自己解决了。我从bootstrap3-typeahead切换到jQuery UI自动完成。它工作得很好,脚本要小得多。

新代码:

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