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通话，但您没有使用通话回复。 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。

Answer 2

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

我认为您的代码存在问题是因为您没有调用提供给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'属性，并仅填充数据（如果适用），否则返回空对象。

Answer 3

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

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

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

3 个答案: