javascript - typeahead.bundle.js 如何通过在下拉建议上按 ENTER 开始搜索？

Question

我设法通过单击下拉建议来使其进行搜索。但当我按 ENTER 时它没有响应。

app/assets/javascripts/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

我相信它不起作用您的 $('#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 请求，使用以下结构将参数传递给我的 Controller {subscription: {email: 'test1@email.com'}}

这是我的路线

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

我的订阅 Controller 有一个create操作来保存订阅，但最重要的是在私有(private)方法中具有以下强参数

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

第一次尝试我很幸运，我能够正确编写 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)

但是如果你这样做，你应该确保你的js以某种方式显示错误消息