php - 避免多次服务器调用， "self-filtering"JqueryUI 自动完成

Question

考虑“方法A:无ajax”:

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

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

这是一个相对较小的“未过滤”数组。自动完成功能会在您键入时为您进行过滤。我想获取一次该数据，因此只需要对数据库进行一次调用。

考虑“方法 B:‘内部’URL:

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

这并不像我期望的那样工作。无论我输入什么，整个列表总是在那里。现在，在研究阅读文档、其他 S/O 问题以及我能找到的每个示例之后，他们通常会得出这样的结论:

"Data should be filtered server side. The autocomplete widget adds the term parameter to the url, so the resulting url is something like: /search.php?term=whatityped

我可以处理这个问题，但这在“方法 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 的关联数组，但重点是它也不会“ self 过滤”)

$( "#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
            });
        });

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

在回调成功完成之前，自动完成功能显然不会起作用，因此您可能需要记住这一点。