4

このトピックについてRailscastをフォローしています。オートコンプリート機能は機能しますが、ユーザーがアイテムを選択してEnterキーを押すと、フォームを送信できません。私はこの（coffeescript）コードを持っていますが、うまくいかないようです...誰かが私がどこで間違っているのかわかりますか？

jQuery ->
  $('#search_bar').autocomplete( 
    source: $('#search_bar').data('autocomplete-source')
  ).keydown (e) ->
    $('#search_button').trigger "submit" if e.keyCode is 13

理想的には、マウスクリックでもアイテムを選択して送信したいのですが、それが可能かどうかはわかりませんか？

更新：私はこれを試しました...

jQuery ->
  $('#search_bar').autocomplete
    source: $('#search_bar').data('autocomplete-source'),
    select: (event, ui) ->
      $(this).parents("form").submit()

...キーボードを使用してアイテムを選択すると（そしてEnterキーを押すと）機能するようになりましたが、マウスクリックでアイテムを選択すると、入力した文字列のみが送信され、オートコンプリートからの完全な単語は送信されません。完全なドロップダウン。（私が必要としているのは、マウスオーバー時にテキストの内容で検索フィールドを更新することだと思いますか？）

アップデート2：ソート済み！これを最後に追加するだけです

focus: (event, ui) ->
   $('#search_bar').val(ui.item.value)
4

2 に答える 2

9

selectイベントを使用します。ここのドキュメント Enterキーは、メニューを閉じるためにオートコンプリートによってキャッチされ、意図的に伝播されません。selectイベントは、Enterキーとマウス選択の両方で発生します。ただし、クリックすると、ラベルが変更される前にフォームが送信されるため、最初にその値を設定する必要があります。データソースによっては、item.labelの代わりに使用することもできますitem.value。

$('#search_bar').autocomplete({
   source: $('#search_bar').data('autocomplete-source'),
   select: function(event, ui) {
         $(this).val(ui.item.value);
         $(this).parents("form").submit();  // this will submit the form.
   }
})

私はコーヒースクリプトがこのように見えると信じています

$('#search_bar').autocomplete(
   source: $('#search_bar').data('autocomplete-source'),
   select: (event, ui) ->
         $(this).val(ui.item.value).parents("form").submit();
)
于 2012-08-22T17:06:23.567 に答える
1

コーヒースクリプトについてはよくわかりませんが、これは私がjavascriptでそれを行う方法です

http://jqueryui.com/demos/autocomplete/

'select'イベントを使用できます。ユーザーが何かを選択したら、送信します。

$( ".selector" ).autocomplete({
    select: function(event, ui) {
        $('#theForm').submit();
    }
});

私はこれがあなたのために両方のケースの世話をするだろうとかなり確信しています。onEnterとonClickの両方。

于 2012-08-22T17:08:58.237 に答える