at.js 插件动态更新data. [solved]

发布于 2022-09-04 00:03:52 字数 2375 浏览 7 评论 0

前端用at.js插件实现 @某人后下拉列表,现在想动态更新data数据,我目前用了remoteFilter这个参数,但是没有作用。代码如下。

$('#add_todo_input').atwho({
            at: '@',
            displayTpl: "<li><span class='fa fa-user-md'></span> ${name}</li>",
            callbacks: {
                beforeSave: function (data) {
                    console.log(data);
                },
                remoteFilter: function (query, test) {
                    console.log(query);
                    var ll = new Array();
                    $.getJSON(API_HOST + 'user/search?search=' + query, function (resp) {;
                        $.each(resp,function(index,element){
                            ll.push(element.name);
                        });
                        console.log(ll);
                        if (resp.code == 0) {
                            $.each(resp.data, function (index, element) {
                                ll.push(element.name);
                            });
                            console.log(ll);
                            return ll;
                            test(resp.data.username);
                        }
                    })
                },
            }
        });

补充,下面这个代码是工作的:

$('#add_todo_input').atwho({
            at: '@',
            displayTpl: "<li><span class='fa fa-user-md'></span> ${name}</li>",
            callbacks: {
                remoteFilter: function (query, callback) {
                    var ll = new Array();
                    $.getJSON(API_HOST + 'user/search?search=' + query, function (resp) {
                        if (resp.code == 0) {
                            $.each(resp.data, function (index, element) {
                                ll.push(element.username);
                            });
                            callback(ll);
                        }
                    })
                },
            }
        });

一开始我以为这个callback要换成自己的函数,发现自己的函数没有被调用,所以照官网例子,更改为callback,之前以为要手工赋值这个data数据,实际上是内部实现的,之前的代码在执行到test那个函数的时候已经返回了,不会执行到这一步,而且数据的格式也不对,数据的格式应该是如下格式:

data = [
{
name: 'tolerious',
id: 1
},
{
name: 'segmentfault',
id: 2
}  
]

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

少女的英雄梦 2022-09-11 00:03:52

函数名字应该不重要,你之前的 test 不工作是因为你 test() 是在 return 之后调用的,永远执行不到。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文