如何使用Rails 4获得Jquery UI自动完成function?
我正在使用带有jquery-rails(3.1.0)和jquery-ui-rails(4.1.1)gems的Rails 4.0.2。 我正在尝试将自动填充添加到搜索表单中(使用Bootstrap 3.1.0):
Search
这是我的应用程序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
现在有了所有这些,我的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
根据您的注释判断,您似乎没有在控制器中正确获取参数,因此请尝试:
render json: @products.where("name ILIKE ?", "%#{params[:term]}%")