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

Question

我设法通过单击下拉建议使其进行搜索。但是当我按 ENTER.

时它没有响应

app/assets/javascripts/custom.咖啡

$ ->
    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 请求，将参数传递到具有以下结构的我的控制器 {subscription: {email: 'test1@email.com'}}

这是我的路线

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

我的订阅控制器有一个 create 保存订阅的操作，但最重要的是在私有方法中有以下 strong params

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 (, , ) 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 以某种方式显示错误消息

Answer 2

我查看了 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() 后，我可以从下拉列表中 select 建议并立即搜索。所以代码应该是这样的：

_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()

现在一切正常。

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

typeahead.bundle.js how to start searching by pressing ENTER on the dropdown suggestions?

javascript

ruby-on-rails

coffeescript

typeahead.js