jQuery UI自动完成选择

Question

jQuery UI自动完成选择

4

我需要帮助修改以下的代码。

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

但它不起作用。

- user367864

你在警告弹出框中看到了什么？ - lbstr

在弹出的警告框中，我看到：未定义。 - user367864

如果您在选择函数中执行 alert(ui.item)，您会看到什么？ - lbstr

执行 alert(ui.item) 后，我得到的结果是：[object Object]。 - user367864

1

在Chrome中尝试使用console.log(ui.item);，应该显示完整的对象结构。 - c.hill

我的自动补全在Chrome中根本不起作用！ - user367864

3个回答

2

您的源函数只填充了名称。如果您想要该数据结构中的所有内容，请执行以下操作：

$("#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); //not val.name
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value.zzz);
    }
});

- lbstr

嗯，我尝试过这个，但它破坏了我的自动完成功能。我的意思是，当我开始输入时，没有结果显示。我可以在Firebug中看到“响应”，但据我所见，val.name没有被显示出来。 - user367864

0

这似乎是一个对象数组... 你可能缺少的是"[0]"或者一般的"[index]"。

请检查这个链接：jqueryui.com/demos/autocomplete/#event-select

- Romias

它还是不工作。是的，这是一个数组。以下是我通过ajax调用的文件的PHP代码

$query = mysql_query("SELECT cv_ville,cv_numville FROM cms_code_ville WHERE cv_ville LIKE '%".$_GET['term']."%'");

// 构建结果数组
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
$friends[$x] = array("name" => $row["cv_ville"] , "zzz" => $row["cv_numville"]);
}

// 将JSON输出到页面
$response = $_GET["callback"] . "(" . json_encode($friends) . ")";
echo $response;

- user367864

那如果你使用了：alert(ui[0].zzz) 呢？ - Romias

这是在您选择某些内容后触发。因此，“ui.item”应该是所选项...或null（如果未选中任何内容）。因此，您可以检查ui.item是否为空，然后检索其属性。在您的json中...您有“name”和“zzz”...所以您可以使用“ui.item.name”或“ui.item.name.value”。 - Romias

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Whitaker · Accepted Answer

自动完成小部件期望数据源以数组格式提供，其可以是以下两种之一：

包含标签属性、值属性或两者都包含的对象
简单字符串值

目前您正在生成第二个（一个字符串值的数组），这很好，但是您还可以在迭代过程中稍微调整数据并同时提供对象中的其他属性。

$("#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属性的访问。

这是一个可工作的示例（没有AJAX调用）：http://jsfiddle.net/LY42X/