jquery-ui - 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

自动完成小部件需要使用以下任一数组格式的数据源:

包含 的对象标签属性(property)，值 属性(property)，或两者兼而有之

简单字符串值

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

$("#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);
    }
});​

现在，由于您提供给小部件的数组包含带有 的对象。姓名 属性，您应该获得自动完成功能并且还可以访问 zzz属性(property)。

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