1

好的，我已经把这个自动完成的东西弄乱了 2 周了，它开始让我头疼！我已经让它完成了我需要的几乎所有事情，但我被一个问题挂断了。我有两个绑定在一起的自动完成文本输入。第一个输入允许用户从 MySQL 数据库表中选择一个人。然后，基于该选择，第二输入允许用户从地址数据库表中选择人的地址之一。这部分一切正常。

有问题的自动完成字段查询地址表并将每个结果存储在数组槽中，如下所示：

标题|街道地址|城市|州|邮编

当简单地尝试将所选项目的数据输出到 SPAN 标记的 innerHTML 时，问题就来了。

我使用 formatItem 选项仅在自动完成列表中显示标题。选择项目后，我希望它在输入框下方的 SPAN 标签中显示 street_address、city、state 和 zip。它正在获取信息，但由于 formatItem 函数会自动读取每一行，因此它会显示列表中最后一项的 street_address、city、state 和 zip，而不是选择的那一项。但是，返回到文本输入的是所选项目的标题。这非常令人沮丧！

有谁知道我怎样才能解决这个问题？？？

提前感谢您的帮助！

4

2 回答 2

1

我假设您使用的是http://code.google.com/p/jquery-autocomplete/或其中一种变体。您需要做的是将事件附加到 onItemSelect。在旧版本中，您将获得 LI 元素和可选的额外数据数组。在最新版本中（重写后），您将获得标准值和可选数据响应。如果您感到困惑，请从以下设置开始（假设 Firebug 或其他 console.log 提供者）：

...
onItemSelect = function(a, b) { console.log(a); console.log(b); }
...

这将显示您正在使用的版本的响应。你可以从那里工作。

让我知道你是否可以让它工作。如果你遇到问题，我会写一个更完整的例子。

于 2010-02-19T08:41:38.023 回答
0

演示

JS代码：

$(function() {
var houses = [
{
    title: "House 1",
    value: "House 1",
    street_address: "Address 1",
    city: "City 1",
    state:"State 1",
    zip:123456
},
{
    title: "House 2",
    value: "House 2",
    street_address: "Address 2",
    city: "City 2",
    state:"State 2",
    zip:456123    
}
];
$( "#house" ).autocomplete({
minLength: 0,
source: houses,
/*focus: function( event, ui ) {
$( "#project" ).val( ui.item.label);
return false;
},*/
select: function( event, ui ) {
    $('#house_address').html(ui.item.street_address+", "+ui.item.city+", "+ui.item.state+", "+ui.item.zip);
    return false;
}
})

});

HTML：

<div id="project-label">Select a house(type like "h" for a start):</div>
<input type="text" id="house">     
<br>
House complete address:<br>    
<span id="house_address"></span>
于 2014-07-14T09:00:57.987 回答