php - at.js 无法使用远程过滤器，不显示下拉列表

Question

我一直在尝试使用 https://github.com/ichord/At.js 版本 1.5.1 中的 At.js 库为我的 php 应用程序实现 @mentions

当我输入 @ 和后面的内容时，我在 firebug 中看到一个 ajax 查询，但我没有看到用于选择不同名称的下拉列表。

我使用的 JavaScript 代码如下:

$('#editor').atwho({
    at: "@",
    displayTpl:"<li data-value='${key}'>${username} <img src='${avatar}' height='20' width='20' /></li>",
    callbacks: {
        remoteFilter: function(query, callback) {
        if(query.length > 0) {
            $.ajax({
                url: $( "#url_mentions" ).val(),
                    data: {
                        search : query
                    },
                    done: function(data) {
                        callback(data.users);
                    }
                });
            }
        }
    }
});

浏览器中直接调用url返回的json:

{"users":[{"key":"[mention userid=742]admin[\/mention]","userid":"1742","username":"admin","avatar":"<img class=\"kavatar\" src=\"http:\/\/jfconnectoquickstart\/media\/tr\/avatars\/resized\/size24\/cs\/s_nophoto.png\" width=\"24\" height=\"24\"  alt=\"admin's Avatar\" \/>"},{"key":"[mention userid=743]jack[\/mention]","userid":"743","username":"jack","avatar":"<img class=\"kavatar\" src=\"http:\/\/jfconnectoquickstart\/media\/tr\/avatars\/resized\/size24\/cs\/s_nophoto.png\" width=\"24\" height=\"24\"  alt=\"jack's Avatar\" \/>"}]}

HTML 部分:

<div class="control-group">
    <label class="control-label">Message</label>
    <div class="controls">
        <textarea class="span12" name="message" id="editor" rows="12" tabindex="7"
              required="required"></textarea>
    </div>
</div>

你有办法解决这个问题吗？

提前致谢

Answer 1

有点晚了，但可能会帮助其他人。

您必须添加“searchKey”参数(请参阅第一个参数)

$('#editor').atwho({
searchKey: 'username', // this is what missing
at: "@",
displayTpl:"<li data-value='${key}'>${username} <img src='${avatar}' height='20' width='20' /></li>",
callbacks: {
    remoteFilter: function(query, callback) {
    if(query.length > 0) {
        $.ajax({
            url: $( "#url_mentions" ).val(),
                data: {
                    search : query
                },
                done: function(data) {
                    callback(data.users);
                }
            });
        }
    }
}

});