在页面中的许多输入中实现jQuery自动完成

Question

我有一个自动填充功能，可以从谷歌的建议中获取结果。在一个页面上，我有多个输入字段，我希望包含该功能，以便所有输入都将从谷歌建议和使用jquery自动完成小部件获取结果。

这是一个小提琴：http://jsfiddle.net/8q25P/

注意第一个输入它解析的谷歌查询。在第二个具有不同ID的第二个我想要实现该功能的地方。

非常感谢

Answer 1

为每个输入添加一个类，并将自动完成功能绑定到具有该类的类的输入

$(input.class).autocomplete()

Answer 2

以下是更改..

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

}