2

考虑“方法 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 问题以及我能找到的每个示例之后——他们通常会以这样的方式结束：

“数据应在服务器端进行过滤。自动完成小部件将term参数添加到 url，因此生成的 url 类似于：/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 的关联数组，但重点是它也不“自过滤”）

$( "#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"/>
4

1 回答 1

0

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

一个例子：

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

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

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

于 2014-02-27T22:45:36.893 回答