typeahead.bundle.jsドロップダウン候補でEnterキーを押して検索を開始するにはどうすればよいですか？

Question

DropDownの提案をクリックして検索を行うことができました。しかし、ENTERを押すと反応しません。

アプリ/資産/ JavaScriptの/ custom.coffee

$ -> 
    movies = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: '/movies/autocomplete?query=%QUERY', 
      wildcard: '%QUERY' 
     } 
    }); 

    $('#query').typeahead(null, { 
     source: movies 
    }); 

    $('.tt-menu').on 'click', -> 
     $('#search_form').submit() 

    $('.tt-menu').on 'keypress', (e) -> 
     if (e.which == 13) 
      $('#search_form').submit() 

すべてのヘルプは本当にいただければ幸いです！私はそれが動作しないと信じて

Answer 1

javascriptファイルtypeahead.bundle.jsを調べました。

_onEnterKeyed: function onEnterKeyed(type, $e) { 
      var $selectable; 
      if ($selectable = this.menu.getActiveSelectable()) { 
       this.select($selectable) && $e.preventDefault(); 
      } 
     } 

$ e.preventDefaultは（）custom.coffeeでキープレスイベントをトリガするためにENTERを停止しています。それを削除して$ e.preventDefault（）を削除すると、ドロップダウンリストから提案を選択し、即座に検索できるようになります。 ので、コードは次のようになります。

_onEnterKeyed: function onEnterKeyed(type, $e) { 
      var $selectable; 
      if ($selectable = this.menu.getActiveSelectable()) { 
       this.select($selectable); 
      } 
     } 

をまた、私は完全に以下のコードを削除する必要があります。

$('.tt-menu').on 'keypress', (e) -> 
    if (e.which == 13) 
     $('#search_form').submit() 

今、すべてが期待通りに動作します。

Answer 2

はあなたの$('#search_form').submit()は多分あなたは何をしたい：

$('.tt-menu').on 'keypress', (e) -> 
     if (e.which == 13) 
      $.post('/movies', {your_model: {your_field1: 'test', your_field2: 'test2'}};) 

は実際にあなたが私の本番サーバーhttps://sprachspiel.xyzでこれをテストすることができ、私が開発してテストしました。

私はホームページ（https://sprachspiel.xyz）に行って、f12私のJavaScriptコンソールで開かれました。その後、JavaScriptコンソールに私は次のコードを投稿：

$.post('/subscription', { subscription: {email: 'test1@email.com'}}); 

このコードは次のような構造で、私のコントローラにパラメータを渡す、私のバックエンドへpost要求を行うの{subscription: {email: 'test1@email.com'}}

これは私のルートです

subscription POST /subscription(.:format) subscription#create 

サブスクリプションコントローラにはcreateサブスクリプションを保存するアクションがありますが、最も重要なのは次のようなものですstrong paramsプライベートメソッド

def subscription_params 
    params.require(:subscription).permit(:email) 
end 

あなたのparamsを構築する方法を、私は最初の試行で幸運だったと私は正しくjqueryの.post()リクエストを書くことができましたが、ケースには、あなたが今ない、あなたは自分のサーバー・アプリケーション・コードにブレークポイントを設定、subscription_paramsに何が間違っているか見ることができます。

あなたが要求を実行すると、サーバーは、私がテストしたbinding.pry

に停止しますが、私のサーバーは、私のdb

Started POST "/subscription" for 127.0.0.1 at 2017-11-01 16:32:14 +0100 
Processing by BuildingsController#createSubscription as */* 
    Parameters: {"subscription"=>{"email"=>"test1@email.com"}} 
    (0.2ms) BEGIN 
    SQL (0.6ms) INSERT INTO "subscriptions" ("email", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id" [["email", "test1@email.com"], ["created_at", "2017-11-01 15:32:14.790279"], ["updated_at", "2017-11-01 15:32:14.790279"]] 
    (19.8ms) COMMIT 
Redirected to http://localhost:3000/ 
Completed 200 OK in 26ms (ActiveRecord: 20.6ms) 

に新しいエントリを作成しますが、あなたがこれを行う場合、あなたは確認する必要があります何らかの理由でエラーメッセージが表示される