26

jQuery UI オートコンプリートの潜在的に単純な問題が私を困惑させています。私の情報源は

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

私はウィジェットを呼び出しています

$(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);
        }
    });
});

すべて正常に動作します。#search入力フィールドに入力すると、一致するラベルがドロップダウンに表示され、正しいselect検索が実行されます。ウィジェットは、矢印キー (またはマウス) を使用してドロップダウンでさまざまな項目を選択するとlabel、入力フィールドにも を表示します。#searchただし、Enter キーを押すとすぐに、ウィジェットは#search入力フィールドにvalueではなく を入力しますlabel。そのため、フィールドにはOne ThingではなくOne -Thingが表示されます。

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

4

3 に答える 3

6

値を表示する矢印キーにまだ問題がありました。したがって、実際には、値とラベルの両方をラベルに割り当ててから、データの 3 番目のプロパティに値を配置する方が良いことがわかりました。例えばidにつけてみましょう。

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

次に、select イベントを使用すると、ui から ID を取得できます。

select: function( event, ui ) {
    PK.render(ui.item.id);
}
于 2015-02-04T18:09:19.530 に答える