JSONを使用してMVC3のオートコンプリートTextBoxにlocationIDを渡します

Question

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

私はこれを行うことができる方法を提案してください.... デモは、より有用であろう.....

Answer 1

私はあなたがオートコンプリートのためJqueryUIを使用していると仮定します。 JqueryUIのオートコンプリートは、デフォルトで、w/jsonオブジェクトを処理します。具体的には、プロパティを持つオブジェクトリテラルの配列： "label"と "value";

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

重要なことは、これらのプロパティに限定されないことです。たとえば、..say .. "location_id"などのプロパティを追加できます。オートコンプリートイベントを使用して

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

「選択」は、フォームで投稿、あるいは達人バングAJAX呼び出しを発射するための隠された入力に選択されたlocation_idのを保存すなわち何らかのアクションを取ることができます。試してみてください：

... 
<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>