web-dev-qa-db-ja.com

jQueryオートコンプリート：イベント選択

メニューからアイテムが選択されたときにフォームを送信しようとしています。私は検索フォームでクラスを設定し、ここにあるイベント選択を使用しています： http://docs.jquery.com/UI/Autocomplete#event-select

これで、キーボードを使用してアイテムを選択すると（上と下）、機能します。ただし、マウスを使用して項目を選択すると、以前に入力した値が表示されます。

このスクリーナーを確認してください： http://www.screenr.com/7T0s

これは私が提出するために使用するものです：

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(".searchform1").submit()
    }
});
jqueryjquery-uiautocompletejquery-ui-autocomplete
25
jQuerybeast

これはselectイベントのデフォルトの動作が実行されるためです afterイベントハンドラーの実行が終了しました （そうすればキャンセルできます選択してください）。

つまり、何かをクリックすると、ウィジェットがinputを適切に設定する前にフォームが送信されます。

ウィジェットが通常行うことを行うことでこれを修正できるはずです：

$("#searchform-input").autocomplete({
    select: function (a, b) {
        $(this).val(b.item.value);
        $(".searchform1").submit()
    }
});

今、あなたが疑問に思うかもしれないものははいですが、キーボードを使用するとなぜ機能するのですか？

これは、focusイベントが実際にinputのフォーカスされたアイテムを取り込むために発生します（よく見ると、リストを上下に移動するとinputが取り込まれます）。アイテムの上にマウスを置くと、focusイベントが呼び出され、inputが設定されます。 enterキーを使用して何かを選択すると、inputイベントのために、正しい値がfocusにあります。

63
Andrew Whitaker