jquery - 如何让 Jquery UI Autocomplete 与 Rails 4 一起工作?

标签 jquery ruby-on-rails ruby jquery-ui ruby-on-rails-4

我将 Rails 4.0.2 与 jquery-rails (3.1.0) 和 jquery-ui-rails (4.1.1) gem 一起使用。我正在尝试添加 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 .

比起我的 Controller 和自动完成路由:

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

现在有了所有这些,我的 json 文件和我在 /products/autocomplete.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)

最佳答案

  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

关于jquery - 如何让 Jquery UI Autocomplete 与 Rails 4 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22507669/

相关文章:

ruby-on-rails - Rails Chartkick Gem 加载图表时出错,找不到适配器

ruby - 为什么在使用 "if"搜索子字符串时,使用速记 "include?"语法不求值

javascript - 这个 jQuery block 由于某些错误而创建了一个奇怪的循环

javascript - 需要有关 jQuery 将数据发布到 php 文件的帮助

ruby-on-rails - gem 如何提供 Cucumber 功能和步骤定义?

ruby-on-rails - 如何使用命令提示符在 Windows 7 上的 Sublime 中打开 ruby​​ gem?

ruby-on-rails - Ruby on Rails 种子数据

Ruby 通过正则表达式的一部分进行拆分

jquery - 如果未使用 jquery 在 html 中登录,则重定向用户

javascript - 如何检查输入框是否有相同的值