Question

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

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

标题| STREET_ADDRESS |城市|状态|拉链

只需尝试将所选项目的数据输出到SPAN标记的innerHTML就会出现问题。

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

有谁知道如何解决这个问题???

提前感谢您的帮助！

Answer 1

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

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

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

如果你能让它发挥作用，请告诉我。如果遇到问题，我会写一个更完整的例子。

Answer 2

<强> DEMO

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>

除了文本框之外，jQuery AutoComplete的结果是什么？

2 个答案: