javascript - 为什么我的自动完成功能不起作用？

Question

我有一个 jQuery 自动完成函数，在我用函数重写源代码之前它工作得非常好。

奇怪的是，两个函数返回完全相同的数据，但是，当我向源中添加 ajax 函数时，自动完成功能不再起作用。

工作代码:

    $('#q').autocomplete({
    source:'getklanten.php'

    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.naam + "</a>" )
        .appendTo( ul );
   };

此代码在控制台中返回

GET http://myURL/getklanten.php?term=comp
[{"naam":"Company name","id":12345}]

自动完成函数按预期工作并返回结果。

无法使用可变函数运行代码:

var dynamicVar = $('#zxc').prop('checked');

$('#zxc').change(function(){
    dynamicVar = $('#zxc').prop('checked');
    dynamicVar = $('#zxc').is(':checked');
    console.log(dynamicVar);
});

$('#q').autocomplete({
    //source:'getklanten.php'
    source: function(request, response) {
        $.ajax({
          url: "getklanten.php",
          data: {
            term : request.term,
            supplier : $('#zxc').is(':checked')
          }
        });
    }
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .append( "<a>" + item.naam + "</a>" )
    .appendTo( ul );
};

此代码在控制台中返回:

GET http://myURL/getklanten.php?term=comp&supplier=false
[{"naam":"Company name","id":12345}]

但是，这会破坏自动完成功能。没有任何错误。即使两个函数返回完全相同的数据.. 有人可以帮助我阐明这一点并告诉我为什么会发生这种情况吗？

Answer 1

您正在启动 ajax 调用，但没有使用调用的响应。 source函数中的response参数是一个回调，可以在ajax调用成功后触发。

$('#q').autocomplete({
    //source:'getklanten.php'
    source: function(request, response) {
        $.ajax({
            url: "getklanten.php",
            data: {
                term : request.term,
                supplier : $('#zxc').is(':checked')
            },
            success: function(data){
                response(data);
            },
            error: function(){
                response();
            }
        });
    }
});

即使遇到错误，您也必须始终调用 response 回调。

参见http://api.jqueryui.com/autocomplete/#option-source了解更多信息。