javascript - JQuery UI 自动完成 - 无法加载对象

Question

我正在尝试让自动完成功能与 JQuery UI 一起使用，但是当我尝试传入标签和值对象时遇到了麻烦。

        var people = [];
        var test = new Array();
        var obj = jQuery.parseJSON(data);
        $.each(obj.data, function(i,person){
                people[people.length] = {
                        label: person.id,
                        value: person.name
                };
                test.push(person.name);
        });

        $("#friend").autocomplete({
                source: test,
                select: function(event, ui) {
                    alert(ui.item.id);
                }
        });

当我使用“测试”数组时，它工作正常，但是当我尝试使用 people 对象时，似乎没有任何工作，也没有 JS 错误。

我错过了什么？

Answer 1

您正在向后加载人员对象。自动完成适用于label，而不是value，因此您将自动完成您的 id 而不是名称。

label将是自动完成用于匹配的文本，并且value是您选择它时返回的内容。

只需反转它们，它就会起作用：

 people[people.length] = {
     label: person.name,
     value: person.id
 };

演示：http: //jsfiddle.net/qmmms/1/

Answer 2

尝试：

people.push({value:person.id,label:person.name});

像这样：

var people = []; 
var obj = {data:[{id:1,name:"Adam"},{id:2,name:"Eve"}]};
$.each(obj.data, function(i,person){ 
        people.push( { 
                label: person.name, 
                value: person.id 
        }); 
}); 
$("#friend").autocomplete({ 
        source: people, 
        select: function(event, ui) { 
            alert(ui.item.name); 
        } 
});