JQuery UI自动完成立即消失

JQuery UI autocomplete disappears immediately

本文关键字：消失 UI JQuery      更新时间：2023-09-26

当使用JQuery UI的自动补全功能时，下拉结果似乎永远不会出现。但是，在调试时，该列表在消失之前会出现一小段语句。我的代码如下:

HTML: 

<input type="text" placeholder="search" class="myautocomplete" />
<script>
    $(document).load(function(){initializeAutocomplete()});
</script>
Javascript: 

function initializeAutocomplete() {
    $('.myautocomplete').autocomplete({delay: 300, minLength: 2, source: autocomplete});
}
function autocomplete(request, responseCallback) {
    var dataUrl = "http://something.com/Suggestions.json?search_string=" + request.term;
    var suggestions = [];
    $.getJSON(dataUrl, function(json) {
        $.each(json.AutoSuggestions, function(index) {
            suggestions.push(this.SearchTerm);
        });
    });
    responseCallback(suggestions);
}

是什么导致自动完成列表立即消失?

这是因为getJSON是异步的，所以responseCallback函数在数组为空时被调用，将函数移动到getJSON函数内的每个循环之后。

试着改一下:

function initializeAutocomplete() {
    $('.myautocomplete').autocomplete({delay: 300, minLength: 2, source: autocomplete});
}
function autocomplete(request, responseCallback) {
    var dataUrl = "http://something.com/Suggestions.json?search_string=" + request.term;
    var suggestions = [];
    $.getJSON(dataUrl, function(json) {
        $.each(json.AutoSuggestions, function(index) {
            suggestions.push(this.SearchTerm);
        });
        responseCallback(suggestions);
    });
}
相关文章：