如何让 Jquery UI Autocomplete 与 Rails 4 一起使用?

Posted

技术标签:

【中文标题】如何让 Jquery UI Autocomplete 与 Rails 4 一起使用?【英文标题】:How to get Jquery UI Autocomplete working with Rails 4? 【发布时间】:2014-04-25 19:18:40 【问题描述】:

我正在使用带有 jquery-rails (3.1.0) 和 jquery-ui-rails (4.1.1) gem 的 Rails 4.0.2。我正在尝试将Autocomplete 添加到搜索表单(使用Bootstrap 3.1.0):

<%= form_tag products_path, method: :get, class: 'navbar-form navbar-left' do %>
   <div class='form-group'>
     <%= text_field_tag :query, params[:query], id: "navbar-search-input", class: 'form-control', placeholder: 'Product name.....' %>
   </div>
   <%= button_tag(type: 'submit', id: 'navbar-search-btn', class: 'btn btn-default') do %>
     <i class='fa fa-search fa-fw'></i> Search
   <% end %>  
<% end %>

这是我的应用程序 JS 和 CSS 文件:

application.js

//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require turbolinks
//= require_tree .

var ready;
ready = (function() 
  $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
  $("#navbar-search-input").autocomplete(
    source: '/products/autocomplete.json',
  );
);

$(document).ready(ready);
$(document).on('page:load', ready);

application.css.scss

*= require bootstrap
*= font-kit-rails/ubuntu
*= require jquery.ui.autocomplete
*= require_self
*= require_tree .

比我的控制器和路由自动完成:

class ProductsController < ApplicationController

  def autocomplete
    @products = Product.order(:name)
    respond_to do |format|
      format.html
      format.json  
        render json: @products.where("name ILIKE ?", "%#params[:q]%")
      
    end
  end

routes.rb

  resources :products do
    collection do
      get 'autocomplete'
    end
  end

现在有了所有这些,我在/products/autocomplete.json 的所有产品的 json 文件都在那里。问题是如果我输入任何内容,它会给我一个空白下拉列表,如果我单击下拉列表的任何区域,它将重置搜索表单字段。你知道如何让它工作吗?

编辑

注意:我有一个名为 Rice

的产品
Started GET "/products/autocomplete.json?term=ric" for 127.0.0.1 at 2014-03-19 10:06:51 -0400
Processing by ProductsController#autocomplete as JSON
  Parameters: "term"=>"ric"
  Product Load (0.9ms)  SELECT "products".* FROM "products" WHERE (name ILIKE '%%') ORDER BY "products"."name" ASC
Completed 200 OK in 16ms (Views: 14.3ms | ActiveRecord: 0.9ms | Search: 0.0ms)

【问题讨论】:

您的控制台中是否出现任何 JS 错误? @tirdadc 没有错误,但我的 GET 请求没有返回任何内容。看看我的编辑。 【参考方案1】:
  def autocomplete
    @products = Product.order(:name).where("name LIKE ?", "%#params[:term]%")
    respond_to do |format|
      format.html
      format.json  
        render json: @products.map(&:name).to_json
      
    end
  end

【讨论】:

@NimishJain 我的理解有限 - 当您在自动完成字段中输入内容时,它会作为 params[:term] 传递给控制器​​,然后用于搜索产品并将该数据返回给回调函数进行处理。【参考方案2】:

从您的笔记来看,您似乎没有在控制器中正确获取参数,因此请尝试:

render json: @products.where("name ILIKE ?", "%#params[:term]%")

【讨论】:

Dang,我仍然得到相同的结果。

以上是关于如何让 Jquery UI Autocomplete 与 Rails 4 一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI Droppable:如何让它活起来?

jquery UI sortable:如何让原始可见直到下降?

请问,如何让 jQuery UI 里的 dialog 不随滚轮上下滚动啊?

如何修复 flutter_google_places_autocomplete.dart 的错误?

jQuery UI 自动完成:如何让 TAB 选择列表中的第一个选项?

如何让 jQuery UI 的 Draggable 和 Sortable 函数在 iPhone 上工作?