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

Posted 2021-05-02

我有一个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}]

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

答案

您正在开始ajax通话，但您没有使用通话的响应。 response函数中的source参数是一个回调，您可以在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。

另一答案

现在，这个答案没有经过测试，但在这里它是非常少的。

我相信你的代码的问题是基于你没有调用提供给source属性的anon函数中给出的回调这一事实。

As is stated in the documentation，必须调用响应回调，无论ajax是否出错，因此widget始终具有正确的状态。

我要复制上面的代码，并在适用的地方添加评论;但要开始.. 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选项对象中的“complete”属性，并仅填充数据（如果适用），否则返回空对象。

另一答案

您需要修改您的PHP代码，以便它返回：

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