5

提案されたものだけでなく、ユーザーが自分のバリアントを追加できるようにしたいと思います。しかし、フィールドに何かを入力して[Enter]をクリックすると、フォームが送信されます。

次に、フィールドのキーダウンイベントをキャッチしようとしましたが、この場合、UIパラメーターが定義されていないため、矢印を使用して提案からバリアントを選択し、キーを入力する可能性がありません。

    $('#field_id').on('keydown', function(event) {
        if (event.keyCode == $.ui.keyCode.ENTER
            || event.keyCode == $.ui.keyCode.NUMPAD_ENTER)
        {

            $('#field_id').trigger('autocompleteselect');
        }
    });

    $('#field_id').autocomplete({
        source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}]
        minLength: 0
    }).on('autocompleteselect', function(event, ui) {
        // if I click on suggestion using mouse - everything is ok
        // but not for ENTER-key choosing

        // I want something like that:
        if (ui.item) {
              id = ui.item.id;
              value = ui.item.value;
        } else {
              id = 'my_new_item';
              value = $(this).val();
        }
        return false;
    });
4

1 に答える 1

4

Enter時にフォームが送信されないようにする場合は、preventDefaultを使用できます。

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

オートコンプリートの場合、Enterキーが押されたときに「autocompleteselect」イベントをトリガーすると、ユーザーが提案されたアイテムでEnterキーを押したときに、「autocompleteselect」ハンドラーが2回起動されることに注意してください。これとuiパラメータの欠落を回避するには、応答コールバックを使用してユーザー入力を提案アイテムとして追加し、オートフォーカスをtrueに設定してみてください。

オートコンプリートに一致するものがない場合に、ユーザー入力が候補リストに追加される例を次に示します。

$('#field_id').autocomplete({
    source: [{
        "id": "20",
            "value": "This is not mandatory decline reason"
    }, {
        "id": "21",
            "value": "You are have to be rejected"
    }],
    minLength: 0,
    autoFocus: true,
    response: function (event, ui) {

        if (ui.content.length == 0) {
            ui.content.push({
                label: "New Search value: " + $(this).val(),
                value: $(this).val(),
                id: 0
            });
        }
    }
}).on('autocompleteselect', function (event, ui) {
    id = ui.item.id;
    value = ui.item.value;

    return false;
});

上記のjsfiddleの例を次に示します。

お役に立てれば。

于 2013-02-18T19:59:31.003 に答える