0

私はjquery/ajaxオートコンプリートを使用しています。以下は、私の単純なアプリのコードスニペットです。

外部.jsp：

    $(function () {
     $("#inputfield").autocomplete({
     source: '/fruitapp/findFruit'
     });
    });

そして私のコントローラーでは：

    def findFruit = {
     def fruitsearch= Fruit.withCriteria {
      ilike 'fruit', params.term + '%'
      }
     render (fruitsearch?.'fruit' as JSON)
    }

ご覧のとおり、「入力フィールド」である単一のテキストフィールドにのみ入力されます。ここで、オートコンプリートリストからアイテムを選択すると、少なくとも2つのフィールドに入力されるようにしたいと思います。どうすればいいですか？

前もって感謝します。

4

1 に答える 1

2

オートコンプリートは「選択」イベントを取得できます。そこであなたはあなたがやりたいことを何でもすることができます。

彼らのドキュメントから

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

これが私が彼らの例から作ったフィドルです。ご覧のとおり、オートコンプリートオプションを選択すると、2つの異なるdivが更新されます。

これはそれを担当するコードです：

$( "#tags" ).autocomplete({
            source: availableTags, 
            select:function(e,u){ 


                console.log([e,u]);
                $("#output").text("This is the label:" + u.item.label);
                $("#more_output").text("this is the value:" + u.item.value);

            }
  });

そして、完全に明確にするために、「u」には必要なものをすべて含めることができます。

ここでは、単一の複雑なJSオブジェクトを含むようにフィドルを変更しました。すべてのフィールドにアクセスできます。

ご覧いただけるようにログプリントを追加しました。Chromeの開発者ツールを使用して、ログの印刷を確認し、オブジェクトのコンテンツを表示します。

于 2012-09-02T13:34:43.953 に答える