0

国、州のマスターがいます.....場所のオートコンプリートテキストボックスを作成しました。このオートコンプリートは、これらのマスターからすべての場所の名前（すべての国の名前と州の名前）を返します。 jqueryに渡すのは、文字列形式のロケーション名だけです。ロケーションIDとロケーション名の両方をjqueryに渡したいのですが、オートコンプリートでロケーション名のみを表示したいのです。 このオートコンプリートは、ユーザーからの優先ロケーションを保存するために使用されるためです。 ユーザー設定の場所情報をユーザーテーブルに保存するには、それぞれの場所の名前が付いたIDが必要です。

どうすればこれを行うことができるか提案してください....デモがより便利になります.....

4

1 に答える 1

0

オートコンプリートに JqueryUI を使用していると思います。デフォルトでは、JqueryUI のオートコンプリートは json オブジェクトで動作します。具体的には、"label" と "value" のプロパティを持つオブジェクト リテラルの配列です。

{ label:x, value:y }

オートコンプリートは「label」プロパティを使用してオートコンプリートの一致を計算し、ユーザーが選択すると、「value」プロパティを選択された項目として使用します。また、「value」プロパティを省略した場合は、「label」を比較と選択の両方に使用します。

注意すべき重要なことは、これらのプロパティに限定されないということです。たとえば、「location_id」などの追加のプロパティを追加できます。

{ label: "Some State and Country", location_id: 2 }

オートコンプリート イベント "select" を使用すると、何らかのアクションを実行できます。つまり、選択した location_id を非表示の入力に保存してフォームで投稿したり、驚異的な ajax 呼び出しを実行したりすることもできます。これを試して：

...
<form>
Locations: <input id="location" />

<input type="hidden" id="location_id" />
<input type="submit">
</form>
...

<script>
  var mylocations = [
      {
        label: "North Carolina, USA",
        id: 123
      },
      {
        label: "North Dakota, USA",
        id: 128
      },
      {
        label: "Nevada, USA",
        id: 125
      },
      {
        label: "New York, USA",
        id: 311
      },
      {
        label: "New Brunswick, Canada",
        id: 267
      },
      {
        label: "Nova Scotia, Canada",
        id: 235
      },
      {
        label: "Newfoundlandand , Canada",
        id: 223
      }];

  $("#location").autocomplete({
    source: mylocations,
    select: function( event, ui ) {
      // store your location id somewhere like a hidden input ..you
      // can then allow the user to post the form (and selected id) back. 
      $( "#location_id" ).val( ui.item.id );
      return false;
    }
  });
</script>
于 2012-04-27T09:38:04.910 に答える