1

さて、私はこのオートコンプリートを2週間いじっていますが、頭痛の種になり始めています。必要なほとんどすべてのことを実行できるようになりましたが、1つの問題に悩まされています。互いに結び付けられた2つのオートコンプリートテキスト入力があります。最初の入力により、ユーザーはMySQLデータベーステーブルから人を選択できます。次に、その選択に基づいて、2番目の入力により、ユーザーは住所データベーステーブルから個人の住所の1つを選択できます。この部分はすべて正常に機能します。

問題のあるオートコンプリートフィールドは、アドレステーブルをクエリし、次のように各結果を配列スロットに格納します。

タイトル|street_address| city | state | zip

選択したアイテムのデータを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/またはそのバリエーションの1つを使用していると想定しています。あなたがする必要があるのは、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 に答える