本文介绍了如何让 Jquery UI 自动完成与 Rails 4 一起使用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我将 Rails 4.0.2 与 jquery-rails (3.1.0) 和 jquery-ui-rails (4.1.1) gems 一起使用.我正在尝试将 Autocomplete 添加到搜索表单(使用 引导程序 3.1.0):

<%= text_field_tag :query, params[:query], id: "navbar-search-input", class: 'form-control', placeholder: 'Product name.....' %>

<%= button_tag(type: 'submit', id: 'navbar-search-btn', class: 'btn btn-default') do %><i class='fa fa-search fa-fw'></i>搜索<%结束%><%结束%>

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

application.js

//= 需要 jquery//= 需要 jquery_ujs//= 需要 jquery.ui.autocomplete//= 需要涡轮链接//= require_tree .准备就绪;准备好 =(函数(){$('a[href="' + this.location.pathname + '"]').parent().addClass('active');$("#navbar-search-input").autocomplete({来源:'/products/autocomplete.json',});});$(文件).ready(ready);$(document).on('page:load', ready);

application.css.scss

*= 需要引导程序*= font-kit-rails/ubuntu*= 需要 jquery.ui.autocomplete*= require_self*= require_tree .

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

class ProductsController 

routes.rb

 资源:产品做收藏做获得自动完成"结尾结尾

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

编辑

注意:我有一个名为 Rice

的产品

在 2014-03-19 10:06:51 -0400 开始 GET "/products/autocomplete.json?term=ric" for 127.0.0.1由 ProductsController#autocomplete 处理为 JSON参数:{"term"=>"ric"}Product Load (0.9ms) SELECT "products".* FROM "products" WHERE (name ILIKE '%%') ORDER BY "products"."name" ASC在 16ms 内完成 200 OK(查看:14.3ms | ActiveRecord:0.9ms | Search:0.0ms)
解决方案
 def autocomplete@products = Product.order(:name).where("name LIKE ?", "%#{params[:term]}%")response_to do |格式|格式.html格式.json {渲染 json:@products.map(&:name).to_json}结尾结尾

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 %>

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

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?

EDIT

NOTE: I have a Product named 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 UI 自动完成与 Rails 4 一起使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-03 00:19
查看更多