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

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 了解更多信息。

Answer 2

现在，这个答案没有经过测试，但在这里它仍然是。

我认为您的代码存在问题是因为您没有调用提供给源属性的匿名函数中给出的回调。

As is stated in the documentation，必须调用响应回调，无论 ajax 是否报错，所以小部件总是有正确的状态。

我将复制您的上述代码，并在适用的情况下添加 cmets；但要开始.. 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); // call the callback
          }
        });
    }
});

当然，您应该始终处理您的错误；以上只是一个示例，但理想情况下，您可以将 response() 调用添加到 ajax 选项对象中的“完成”属性，并且仅在适用时填充数据，否则返回一个空对象。

Answer 3

您需要修改您的 PHP 代码以使其返回：

[{"name":"Company name","id":12345}] // <- note "name" in place of "naam"