オートコンプリートjQueryの使用JSONデータ

Question

は、以下のデータをJSONファイル想像：私はそれを選択して値を挿入するためのオプションとしてカラーを表示できるようにしたい、jQueryのオートコンプリートメソッドを使用して

[ 
    { 
     color: "red", 
     value: "#f00" 
    }, 
    { 
     color: "green", 
     value: "#0f0" 
    }, 
    { 
     color: "blue", 
     value: "#00f" 
    }, 
    { 
     color: "cyan", 
     value: "#0ff" 
    } 
] 

を入力上に。

<input type="text" name="selector" id="selector" /> 

<input type="text" name="color" id="color" /> 
<input type="text" name="value" id="value" /> 

上記の説明は必要ありません。色の検索のセレクタの色とinput.valueとの値の値を持つinput.colorの検索のセレクタ。

EDIT：

[{ 
    "label": "Sec\u00e7\u00e3o 1", 
    "value": "1" 
}, { 
    "label": "Sec\u00e7\u00e3o 2", 
    "value": "2" 
}, { 
    "label": "Sec\u00e7\u00e3o 3", 
    "value": "3" 
}, { 
    "label": "Sec\u00e7\u00e3o 4", 
    "value": "4" 
}] 

このHTML：：

<input type="text" id="name" /> 
<input type="text" id="value" /> 

と、このjQueryの：私はアンドリューの答えと、それに続く

$(document).ready(function(){ 
    $("#name").autocomplete({ 
     source: "json.php", 
     select: function (event, ui) { 
      $("#name").val(ui.label); 
      $("#value").val(ui.value); 
     } 
    }); 
}); 

私は、このJSONデータを持っている データを選択するように求められますが、01に警告するととui.valueの変数は、 'undefined'と表示されます。私は何が欠けていますか？

EDIT2： だが、私はこのHTMLを持っているとしましょう：

<input type="text" class="name" /> 
<input type="text" class="value" /> 

<input type="text" class="name" /> 
<input type="text" class="value" /> 

は同じ.autocomplete()の方法で複数のセレクタを処理することが可能ですか？同様に、input.nameを使用してラベルを選択し、その隣のinput.valueのみを更新しますか？

[input.name] [input.value]
^私は隣に
   ラベル                     値を更新^              を選択[入力名] [入力値]
^これは、リモート・データ・ソースを使用して、完全な^

Answer 1

まま：必要に応じて

$("#selector").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "my_server_side_resource.php", 
      type: "GET", 
      data: request, 
      success: function (data) { 
       response($.map(data, function (el) { 
        return { 
         label: el.color, 
         value: el.value 
        }; 
       })); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     // Prevent value from being put in the input: 
     this.value = ui.item.label; 
     // Set the next input's value to the "value" of the item. 
     $(this).next("input").val(ui.item.value); 
     event.preventDefault(); 
    } 
}); 

が$.ajaxコールを微調整します。この例では、次のようなPHPリソースへのリクエストが生成されます。

my_server_side_resource.php？用語= XYZ

あなたは、サーバー側のコードを管理している場合、あなたはこのように見えるために返されたデータを変更することができます：あなたは、単に文字列、あなたの名前を使用することができます

[ 
    { 
     label: "red", 
     value: "#f00" 
    }, /* etc */ 
] 

をsourceなどのサーバー側のリソース：

$("#selector").autocomplete({ 
    source: "my_server_side_resource.php", 
    select: /* same as above */ 
}); 

サーバ側のリソースを使用して完全例えばremote with JSONP exampleをチェックしてください。

編集：ローカルデータを使用して作業のデモのために、この例を参照してください：http://jsfiddle.net/SMxY6/

Answer 2

あなたは、「ラベル」プロパティを使用するようにJSONオブジェクトを変更する必要があります。ドキュメントから：ラベルと値の特性を持つオブジェクトの

配列： [{ラベル： "Choice1"、値 "VALUE1"}、...]

、ラベルプロパティがで表示され提案メニュー。ユーザがメニューから を選択した後に、入力要素に値 が挿入されます。プロパティが1つだけ指定されている場合は、両方とも に使用されます。値プロパティのみを指定した場合は、ラベルとして も使用されます。

次に、「変更」イベントまたは「選択」イベントが発生すると、他のテキストフィールドの値を設定する必要があります。

Answer 3

作業の時間が終わった後、ついにそれが実現しました。私は多くのjsonオブジェクトで構成されるjson配列を持っています。各jsonオブジェクトには、銀行名とそのifscコードがあります。ユーザーは銀行を入力し、データベースから銀行詳細行を除外する必要があります。その銀行を選択すると...私は2つの入力フィールドを1つの銀行とifscコードの他に持っていた。 銀行名を選択し、対応するifscコードが表示されます。だから、これは私がそれをやった方法です： -

---

<script type="text/javascript"> 
$(function() { 





    $("#newBeneBankName").autocomplete({ 

     source: function(request, response) { 

      $.ajax({ 
       url: "getBankDetailsIFSCJson", 
       type: "GET", 
       data: { 
        term: request.term 
       }, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data, function (el) { 
         return { 
          label: el.label, 
          value: el.value 
         }; 
        })); 
       } 
      }); 
     }, //newBeneBankName addBeneIfscCode 
     focus: function (event, ui) { 
      event.preventDefault(); 
      $("#newBeneBankName").val(ui.item.label); 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      $("#addBeneIfscCode").val(ui.item.value); 
      $("#newBeneBankName").val(ui.item.label); 
     } 

}); 
}); 

---

私のJSON配列= [{ ラベル： "インドの国営銀行"、 値： "SBIN00076" } 、 {ラベル： "ICICIバンク"、 値： "ICIC001" }、.. ]