jQuery UIオートコンプリートでは、入力フィールドにラベルの代わりに値が表示されます

Question

jQuery UIのオートコンプリートで問題が起こる可能性があります。私のソースは、私はすべてが正常に動作します

$(function() { 
    $("#search").autocomplete({ 
     source: PK.getAutocompleteSource(), 
     focus: function(event, ui) { 
      $("#search").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#search").val(ui.item.label); 
      PK.render(ui.item.value); 
     } 
    }); 
}); 

でウィジェットを起動してい

var ac = [ 
    { 
     label: "One Thing", 
     value: "One-Thing" 
    }, 
    { 
     label: "Two Thing", 
     value: "Two-Thing" 
    },  
] 

です。 #search入力フィールドに入力すると、一致するラベルがドロップダウンに表示され、selectが正しく検索されます。ウィジェットは、#search入力フィールドにlabelという文字を表示しています。これは、矢印キー（またはマウス）を使用してドロップダウンで別のアイテムを選択するためです。ただし、Enterキーを押すとすぐに、#search入力フィールドにlabelの代わりにvalueが入力されます。だからフィールドはの代わりにの1つのおもとと表示されます。

これを修正するにはどうすればよいですか？確かに私が期待しているのは、より合理的な行動ですね。

Answer 1

ラベルがあなたの価値になりたい場合は、ソースが

代わり

var ac = ["One Thing", "Two Thing"]  

も持っている、ちょうど、オートコンプリートのデフォルトのアクションのselect方法は、（指定されている場合）あなたの値としてvalueオブジェクトを置くことです入力。あなたはまた、選択機能でevent.preventDefault()を入れることができますし、（あなたが持っているように）あなたのラベルがテキストボックスのonFocusであなたの値になるようにし、このコードを使用ONSELECTたい場合は、値として

select: function(event, ui) { 
     event.preventDefault(); 
     $("#search").val(ui.item.label); 
     PK.render(ui.item.value); 
    } 

Answer 2

をラベルを配置します。

select: function(event, ui) { 
     $('#hiddenid').val(ui.item.value); 
     event.preventDefault(); 
     $("#search").val(ui.item.label); }, 

focus: function(event, ui) { 
     event.preventDefault(); 
     $("#search").val(ui.item.label);} 

（onSelectイベントの設定のみ）onFocusイベントがありませんでした。したがって、値はテキスト入力に引き続き表示されます。

Answer 3

私はまだ値を示す矢印キーに問題がありました。だから、私は実際にはラベルと値の両方をラベルに代入し、その値をデータの3番目のプロパティに代入する方が良いことが分かりました。たとえば、idに入れてみましょう。あなたはselectイベントを使用する場合

var ac = [ 
    { 
     label: "One Thing", 
     value: "One Thing", 
     id: "One-Thing", 
    }, 
    { 
     label: "Two Thing", 
     value: "Two Thing", 
     id: "Two-Thing" 
    },  
] 

その後、あなたは、UIからIDを取得することができます。

select: function(event, ui) { 
    PK.render(ui.item.id); 
}