JQuery несколько автозаполнений

Question

JQuery несколько автозаполнений

0

Я использую автозаполнение jQuery UI, на моей странице у меня есть три входа для ввода автозаполнения, я пытаюсь обработать это так:

    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" />

Kyle McBride 10 март 2014, в 11:09

Источник

Теги:

javascript

jquery

jquery-ui

autocomplete

1 ответ

Ещё вопросы

dtyler · Accepted Answer · 2014-03-10T07-15-00.000Z

elem.attr('data-remote-source') возвращает строку 'groups'

Причина, по которой он всегда возвращает одну и ту же строку, это elem глобально (вне инициализатора автозаполнения) и соответствует всем 3 входам. jQuery возвращает первое совпадение.

Затем вы пытаетесь разбить эту строку запятыми, возвращая [ "groups" ]

Вот демонстрация этого - все 3 автозаполнения будут соответствовать "группам", а больше ничего: http://jsfiddle.net/86y2W/

Здесь исправление:

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')]
    });
});

Это использует строку (например, groups) для поиска фактического массива из переменной data

Вот такая же скрипка, обновленная с помощью этого кода: http://jsfiddle.net/86y2W/1/