Javascript jQuery多个自动完成

我正在使用jQuery UI Autocomplete，在我的页面上，我有三个输入要将Autocomplete放在上面，我正在尝试这样处理：

    var elem = $('.tags');

    var groups = ["C","C++","Java","JavaScript","PHP","Python","Ruby"];
    var users = ["John Doe","Jane Doe","Jim Doe"];
    var ips = ["test1","test2","test3"];

    elem.autocomplete({
        source:  elem.attr('data-remote-source').split(','),
    });

但这对我不起作用，我的代码中是否有错误

HTML代码如下所示：

<input type="search" name="" data-remote-source="groups" class="tags" placeholder="Search for groups" />

<input type="search" name="" data-remote-source="users" class="tags" placeholder="Search for users" />

<input type="search" name="" data-remote-source="ips" class="tags" placeholder="Search for ips" />

elem.attr'data-remote-source'返回字符串'groups'

它总是返回相同字符串的原因是elem在自动完成初始值设定项之外是全局的，并且匹配所有3个输入。jQuery正在返回第一个匹配项

然后您尝试在逗号处拆分该字符串，返回[groups]

这是一个演示-所有3个自动完成都将匹配“组”，而没有其他内容：

以下是修复方法：

var elem = $('.tags');

var data = {
    "groups": ["C","C++","Java","JavaScript","PHP","Python","Ruby"],
    "users": ["John Doe","Jane Doe","Jim Doe"],
    "ips": ["test1","test2","test3"]
};

elem.each(function(i,e){
    $(e).autocomplete({
        source:  data[$(e).attr('data-remote-source')]
    });
});

这使用字符串作为示例组，从数据变量中查找实际数组

这是同一把小提琴，用以下代码更新：