jQuery メニューアイテムの選択をする処理

Question

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

キーボードを使ってアイテムを選ぶと機能します。しかし、マウスを使って選択しようとすると、事前にタイプされた値をだします。

送信のために使っているコードです：

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

Answer 1

これは、イベントハンドラの実行終了後に、selectイベントのデフォルトの挙動が実行されているからです。（そのため、選択したらキャンセルできます）

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L241

ということは、何かをクリックしたときに、ウィジェットがinputを埋める前にフォームは送信されます。

以下で直せるかと思います：

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

さて、おそらく、なぜキーボードを使うときにこうなるのか？と不思議に思っているかもしれません。

これは、focusイベントが、inputないでフォーカスされたアイテムをポピュレートするからです。（inputはリストを上下に動かすことによってポピュレートされます。）アイテムにマウスオーバーすると、focusイベントが呼び出され、inputをポピュレートします。focusイベントが原因で、enterキーを使って選択すると、正しい値がinputに入ります。