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

我有一个jqueryautocomplete函数，在我用一个函数重写源代码之前，它工作得非常好

奇怪的是，这两个函数返回的数据完全相同，但是，当我向源代码中添加ajax函数时，autocomplete函数不再工作

工作代码：

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

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

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 );
};

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

不使用变量函数的代码：

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

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

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 );
};

但是，这会中断自动完成功能。没有任何错误。即使两个函数返回完全相同的数据。。

---

有人能帮我解释一下，并告诉我为什么会发生这种情况吗？

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

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

---

[{“name”：“Company name”，“id”：12345}]/您正在启动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();
            }
        });
    }
});

即使遇到错误，也必须始终调用
响应
回调

有关更多信息，请参阅。
现在，这个答案没有经过测试，但在这里它仍然存在

我相信代码的问题在于，您没有调用提供给源属性的anon函数中给出的回调

，无论ajax是否出错，都必须调用响应回调，因此小部件始终具有正确的状态

我将复制您的上述代码，并在适当的地方添加注释；但首先。。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
          }
        });
    }
});

当然，你应该总是处理你的错误；上面只是一个示例，但理想情况下，您可以在ajax选项对象中添加
response（）
调用“complete”属性，并仅在适用时填充数据，否则返回空对象。
这不是问题。My php检查的是值naam，而不是名称。这是荷兰语，正如@Daedalus提到的，这确实不是问题所在。我们能看到任何现场演示或其他东西吗？不需要演示，我相信答案很清楚。@ApulGupta不幸的是，现场代码不是公开的，在JSFIDLE中，我无法调用外部php文件。@Daedalus如果您对如何解决此问题有任何想法，请随时添加您的答案。