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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么我的自动完成功能不起作用?相关的知识,希望对你有一定的参考价值。

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

以上是关于为什么我的自动完成功能不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

我的自动完成功能在 codeigniter 中不起作用

Javascript 自动完成功能在 ascx 中不起作用

在mvc中回发后自动完成功能不起作用

jQuery UI 自动完成功能在 iOS 中不起作用

为啥使用 jQuery 和 PHP 的多项选择自动完成功能不起作用?

Emmet 自动完成功能在 JSX 中不起作用