Реализация jQuery Autocomplete во многих входах на странице

Question

У меня есть автозаполнение, которое берет результаты из предложений Google. На странице у меня есть несколько полей ввода, которые я хотел бы включить в эту функцию, чтобы все входные данные получали результаты из предложения Google и использовали виджет автозаполнения jquery.

Вот скрипка: http://jsfiddle.net/8q25P/

Обратите внимание, что при первом вводе он разбирает запросы Google. На втором, который имеет другой идентификатор, я также хочу реализовать эту функцию.

Большое спасибо

Answer 1

Вот изменения ..

http://jsfiddle.net/gaby/ag9gv/

---

Сначала необходимо применить автозаполнение к обоим элементам, а также привязать retrieve к обоим.

$('#q, #w').keyup(retrieve);

и

$('#q, #w').autocomplete({
        source: []
    });

Вам также нужно немного изменить вызов ajax и метод получения, чтобы сделать связанный элемент автоматически обнаруживаемым .. ( создайте переменную и передайтеэто к методу успеха )

function retrieve() {
    var _this = this;
    $.ajax({
        type: "GET",
        url: 'http://suggestqueries.google.com/complete/search?qu=' + encodeURIComponent($(this).val()),
        dataType: "jsonp",
        success: function(data){parse(data,_this);}
    });
}

var parse = function(data,element) {
    var results = [];
    for (var i = 0; i < data[1].length; i++) {
         results.push(data[1][i][0]);
    }
    $(element).autocomplete({
        source: results
    });

}

Answer 2

Добавьте класс к каждому входу и привяжите автозаполнение к входу с классом этого класса

$(input.class).autocomplete()