Jquery UI自动完成选择

Question

我需要一些以下代码的帮助.

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val.name);
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value);
    }
});?

使用FireBug,我在我的控制台中得到这个:

jQuery171003666625335785867_1337116004522([{"name":"97300 Cayenne","zzz":"203"},{"name":"97311 Roura","zzz":"201"},{"name":"97312 Saint Elie ","zzz":"388"},{"name":"97320 Saint Laurent du Maroni","zzz":"391"},{"name":"97351 Matoury","zzz":"52" },{"name":"97354 Remire MontJoly Cayenne","zzz":"69"},{"name":"97355 Macouria Tonate","zzz":"449"})

一切都很好,但我不知道如何在选择项目上获得'zzz'的价值.

我试过了

alert(ui.item.zzz);

但它不起作用.

Answer 1

自动完成小部件需要数组格式的数据源:

• 包含label属性,value属性或两者的对象
• 简单的字符串值

您当前正在构建第二个(字符串值数组),它工作正常,但您可以在迭代它时稍微调整数据并提供对象中的其他属性:

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push({
                    label: val.name,
                    zzz: val.zzz
                });
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.zzz);
    }
});?

现在,由于您提供窗口小部件的数组包含具有name属性的对象,因此您应该获得自动完成功能并且还可以访问该zzz属性.

这是一个工作示例(没有AJAX调用):http://jsfiddle.net/LY42X/