Question

考虑“方法A：没有ajax”：

$(function() {
    var emails = [
        "john@beatles.com",
        "george@beatles.com",
        "paul@beatles.com",
        "ringo@beatles.com"
    ];

    $( "#invitees" ).autocomplete({
          source:emails
    });
});

这是一个相对较小的“未经过滤”的阵列。自动填充功能会在您键入时为您过滤。我想获取此数据一次，因此只需要一次调用数据库。

考虑“方法B：'内部'网址：

$( "#invitees" ).autocomplete({
    source:"/api/get/users"
});

这不像我期望的那样有效。无论我输入什么，整个列表总是在那里。现在，经过研究阅读文档，其他S / O问题以及我能找到的每个例子 - 他们通常会得出这样的结论：

“数据应在服务器端进行过滤。自动完成小部件会将术语参数添加到网址，因此生成的网址类似于： /search.php?term=whatityped < / p>

我能解决这个问题，但是“方法A”并没有完全发生，是吗？对于较大的数据集，我得到它：无需预先加载100,000个结果。但在这种情况下，我希望能够运行一个查询并完成它。这样一来，如果一个移动用户站在沙漠中，只需一条“服务”，他的手机就不会锁定，而服务器每次输入一封信都会反复请求新数据，对吗？

当请求转到内部URL时：'/ api / get / users'...这里是PHP代码的相关部分：

function get($className,$param1="all",$param2=""){
    //above parameters will be refactored...
    $stmt=$this->db->prepare('SELECT username FROM users');
    $stmt->execute();
    $this->data=$stmt->fetchAll(PDO::FETCH_COLUMN);
    echo json_encode($this->data);
}

该函数返回：

["john@beatles.com","george@beatles.com","paul@beatles.com","ringo@beatles.com"]

再次，如果我明确这样做，过滤工作：

    var emails = [
        "john@beatles.com",
        "george@beatles.com",
        "paul@beatles.com",
        "ringo@beatles.com"
    ];

    $( "#invitees" ).autocomplete({
          source:emails
    });

但这不是：

$( "#invitees" ).autocomplete({
    source:"/api/get/users"
});

我在这里缺少什么？

PS：顺便说一句，这是对方法C的一次未经尝试的尝试 - “ajax回调”：（注意：它的意思是接受来自PHP的关联数组，但重点是它也不会“自我过滤”）

$( "#invitees" ).autocomplete({
    source: function(request,response){
        $.ajax({
            url:"/api/get/users",
            dataType:"json",
            data:{
                maxRows:5, // ? does not work
                //name_startsWith: request.term // ? does not work
            },
            error: function(xhr,status){
                alert(status);
            },
            success: function (data){
                // alert(data);
                response($.map(data,function (item){
                    return{
                        label: item.username,
                    };
                }));
            }
        });
    }
});
//ensures autocomplete is not set to "off"
$('input[name=invitees]').attr('autocomplete','on');

为了完整性，这是我的HTML：

<label for="invitees">Invite by email: </label>
<input id="invitees" name="invitees"/>

Answer 1

您可以将自动完成功能放在回调函数中，并将返回数据传递给它。

一个例子：

        $.getJSON('/myJSONdata', function(data) { 
             $( "#input_field" ).autocomplete({
            source: data
            });
        });

这将在回调完成后将自动完成功能分配给所需的字段，并且数据将被分配，就像它是写入函数的纯文本一样。

在回调成功完成之前，自动完成功能显然无效，因此您可能需要牢记这一点。

避免多个服务器调用，“自我过滤”JqueryUI自动完成

1 个答案: