如何使Rails 4的Jquery UI自动完成功能? [英] How to get Jquery UI Autocomplete working with Rails 4?
问题描述
我正在将Rails 4.0.2与jquery-rails(3.1.0)和jquery-ui-rails(4.1.1)gem一起使用.我正在尝试将自动完成添加到搜索表单(使用
I'm using Rails 4.0.2 with jquery-rails (3.1.0) and jquery-ui-rails (4.1.1) gems. I'm trying to add Autocomplete to the search form (using 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文件:
Here are my application JS and CSS files:
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 .
比起我的控制器和自动完成路由:
Than my controller and route for the autocompletion:
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
的所有产品都在那里.问题是,如果我输入任何内容,它将给我一个空白的下拉菜单,如果我单击下拉菜单的任何区域,它将重置搜索表单字段.你知道如何使它工作吗?
Now with all of this, my json file with all of my products at /products/autocomplete.json
are there. The problem is if I type in anything, it gives me a blank dropdown and if I click on any area of the dropdown it will reset the search form field. Do you know how to get this to work?
编辑
注意:我有一个名为米
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
这篇关于如何使Rails 4的Jquery UI自动完成功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!