javascript - at.js 插件动态更新data. [solved]
大家讲道理
大家讲道理 2017-04-11 13:13:59
0
1
585

前端用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
}  
]
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

répondre à tous(1)
左手右手慢动作

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal