带有 typeahead.js 的 Rails - 400（错误请求）答案

【问题标题】：Rails with typeahead.js - 400 (Bad Request)带有 typeahead.js 的 Rails - 400（错误请求）
【发布时间】：2023-04-08 07:26:01
【问题描述】：

我正在使用 Searchkick gem 和 typeahead.js 为我的搜索输入整合自动完成功能。按照 gem 的tutorial，我已经成功地按照指示设置了我的模型、控制器和路由：

餐厅模型

class Restaurant < ActiveRecord::Base
  searchkick text_start: [:name], autocomplete: [:name], suggest: [:name]

  def search_data
    { name: name }
  end
end

搜索控制器

class SearchController < ApplicationController
  def index
    if params[:query].present?
      @restaurants = Restaurant.search(params[:query], suggest: true)
    else
      @restaurants = []
    end
  end

  def autocomplete
    render json: Restaurant.search(params[:query], autocomplete: true, limit: 10).map(&:name)
  end
end

路线

resources :search, :only => [:index] do
  member do
    get :autocomplete
  end
end

部分搜索

<%= form_tag search_index_path, method: :get do |f| %>
    <%= text_field_tag :query, params[:query], id: "autocomplete" %>
    <%= submit_tag "Search" %>
<% end %>

我感觉是 JS 给我带来了麻烦。我松散地关注了 gem 页面上的 docs 和一些 SO 帖子，这就是我最终得到的结果：

$(function() {
  var restaurants = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('restaurant'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: { "url":"/search/autocomplete?query=%QUERY" }
  });

  restaurants.initialize();

  $('#autocomplete').typeahead(null, {
    displayKey: 'name',
    source: numbers.ttAdapter()
  });
});

注意这一行：

remote: { "url":"/search/autocomplete?query=%QUERY" }

回到视图，一旦我开始在我的输入框中输入，我就会收到这个错误：

GET http://localhost:3000/search/autocomplete?query=%QUERY 400 (Bad Request)

此外，我在控制台中收到此错误：

ERROR bad URI `/search/autocomplete?query=%QUERY'.

QUERY 没有被插值。我该如何解决这个问题？

【问题讨论】：

您收到错误的 URI，因为您的路线无效。您应该使用collection 而不是member。 member 将生成一个类似于 /search/:id/autocomplete 的路径
@AbM 还有什么我需要做的，因为在将member 更改为collection 后它仍然给我同样的错误。
如果有帮助，这就是路由的解释方式：autocomplete_search_index GET /search/autocomplete(.:format)

标签： jquery ruby-on-rails search elasticsearch typeahead.js

【解决方案1】：

var restaurants = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('restaurant'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: { 
        url: "/search/autocomplete?query=%QUERY",
        wildcard: "%QUERY"
    }
});

https://github.com/twitter/typeahead.js/issues/1219

您可能还想修复您的控制器，使其返回一个空的 ActiveRecord::Relation 对象而不是一个空数组。

def index
   if params[:query].present?
     @restaurants = Restaurant.search(params[:query], suggest: true)
   end
   @restaurants ||= Restaurant.none
end

见http://apidock.com/rails/ActiveRecord/QueryMethods/none

【讨论】：