JqueryのUIに値を追加する方法オートコンプリートのテキスト入力

Question

私はJqueryのUIオートコンプリートウィジェットを使用しています。しかし、私は各プログラムの価値を名前ではなくプログラムIDにしたい。 IE：{{ p.id }}ラベルとして名前を、値としてIDを設定するにはどうすればよいですか？

Answer 1

OK！

UIオートコンプリート入力は、label属性によって設定されます。 hidden_val属性は、selectイベントで非表示入力を設定します。

<script> 
$(function() { 
    var programs = [ 
     {% for p in programs %} 
     { 
     hidden_val: "{{ p.id }}", 
     label: "{{ p.Name }}" 
     }, 
     {% endfor %} 
    ]; 
    $("#programs").autocomplete({ 
     delay: 0, 
     source: programs, 
     select: function(event, ui){ 
      $("#program_val").val(ui.item.hidden_val); 
     } 
    }); 
}); 
</script> 

<input type="text" id="programs" /> 
<input type="hidden" id="programs_val" /> 

Answer 2

このトリックを行う必要がありますを見てください！

基本的には、オートコンプリートテキストボックスにname|idのリストを指定します。名前が表示され、.result()関数を使用してidを隠しフォーム要素に入れるようにテキストボックスを変更するだけで済みます。このように：

$("#mytextbox") 
    .autocomplete(data) 
    .result(
    function (evt, data, formatted) 
    { 
     $("#hiddenIDbox").val(data[1]); 
    } 
); 

Answer 3

作品のこの種の、しかし、すぐにオートコンプリート提案が選択されると、アイテムIDがユーザーのために混乱...入力フィールドに表示されて、私は推測します。他のアイデア？

<script> 
$(function() { 
    var programs = [ 
     {% for p in programs %} 
     { 
     value: "{{ p.id }}", 
     label: "{{ p.Name }}" 
     }, 
     {% endfor %} 
    ]; 
    $("#programs").autocomplete({ 
     source: programs 
    }); 
}); 
</script>