在搜索栏中键入时显示 Ruby on Rails 以前的搜索答案

【问题标题】：Ruby on Rails Previous Searches Display when Typing in Search Bar在搜索栏中键入时显示 Ruby on Rails 以前的搜索
【发布时间】：2015-01-04 10:18:05
【问题描述】：

好吧，我有一个图书馆数据库系统，用户可以在其中在搜索栏中输入书籍，然后当他们点击进入时显示与搜索匹配的书籍。我想要做的是得到它，这样当用户在搜索栏中输入“a”时，所有记录都将显示在菜单下方的下拉菜单中，并带有字母“a”，然后当他们输入下一个字母“l " 所有带有“al”的记录都会显示在一个下拉列表中，然后是“ali”，以此类推。我对宝石的了解不多，但想学习。他们是我能做到这一点的方法吗？我正在使用 rails 4.0.1，目前有一个模糊搜索方法。

【问题讨论】：

this railscast 可以满足您的需求。看看吧。
Railscast 非常旧，并且在 Rails 4.x 中不能工作。（如果您是 RailsCasts Pro 订阅者，有一个使用 jQuery UI 的 revised 视频。）

标签： ruby-on-rails ruby search search-engine multiple-results

【解决方案1】：

或者如果你想自己动手... 这是它的要点，可能需要一些调整：

routes.rb

get '/search' => 'search#autocomplete', as: :search_autocomplete

search_controller.rb

def autocomplete
  search_term = params[:search]
  @results = YourModel.where( "your_field LIKE search_term" )
  respond_to do |format|
    format.json @results
  end
end

your_view.html.erb

<%= form_tag( search_autocomplete_path, method: "get" ) do %>
  <%= text_field_tag( :search, params[:search], placeholder: 'Enter a search term...', :id => 'autocomplete_search' ) %>
  <%= submit_tag( "Go" ) %>
  <div id="autocomplete_search_results">
<% end %>

some_coffeescript_file.js.coffee

$( document ).ready ->
  $.ajax '/search',
        type: 'GET'
        parameters: $( "#autocomplete_search" ).val()
        dataType: 'json'
        success: ( data ) ->
            #  here you'll have to append the results to whichever div/container you have in place
            $( '#autocomplete_search_results' ).append "#{ data }"

【讨论】：

好的，所以我已将您的代码放在我认为相关的位置，但我的 routes.rb 有问题（我认为）。这是其中的代码，包括您的代码作为最后一行： MyBookshop2::Application.routes.draw do # 优先级基于创建顺序：首先创建 -> 最高优先级。 root 'products#index' # post from _search.html.erb 'partial' form, # map to the products controller search action post 'products/search', to: 'products#search' resources :products get '/search' = > 'search#autocomplete', as: :search_autocomplete end
是的，如果路径或控制器/操作与您已有的路由冲突，您可能必须更改它。
嗨@NickM，谢谢...这很简单，为什么我无法考虑...一个问题，尽管我们需要在表单输入上设置一个 keyup 事件

【解决方案2】：

签出 Twitter typeahead.js jquery 插件https://github.com/yourabi/twitter-typeahead-rails。

【讨论】：