Global Autocomplete Search

EasyAutocomplete jQuery插件。

https://github.com/pawelczak/EasyAutocomplete

http://easyautocomplete.com/guide#sec-data-file

Every time you type into this box, it's going to fire an AJAX request, the server is going to do some searches, and combine those results into a JSON object that gets returned to the browser, and then your JavaScript library for the autocomplete will take those results, and then display them

1. 激活一个Ajax request

2.server查询，把查询结果放入一个JSON对象，然后返回到浏览器。

3.JS库EasyAutocomplete将得到这些结果并显示它们。

本案例使用Categories feature. 一个很有用的工具。

第一步添加<script>

1.在<head>添加

<!-- Using jQuery with a CDN 加上jquery文件 -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

2.把文件放入assets/javascripts和stylesheets

官网下载，http://easyautocomplete.com/download

把easy-autocomplete.css和easy-autocomplete.themes.css放入Rails app的 app/asset/stylesheets文件夹。
把jquery.easy-autocomplete.js放入javascript文件夹。
在application.js中加上//= require jquery.easy-autocomplete
在application.scss中加上*= require easy-autocomplete和*= easy-autocomplete.thems

3. 在浏览器的console上试试：

第二步：添加路径。

get :search, controller: :main ／／或者 get 'search', to: "main#search"

输入rails routes可查看

建立一个main_controller.rb

class MainController < ApplicationController
  def index

  end

  def search
    render json: {movies: [], directors: []}
  end
end

在浏览器输入localhost:3000/search

渲染JSON:

第三步

添加gem 'ransack'

class MainController < ApplicationController
 ...

  def search
    @movies   = Movie.ransack(params[:q]).result(distinct: true)
    @directors = Directors.ransack(params[:q]).result(distinct: true)
　　//可以限制条数.limit(5)
  end
end

新建views/main/search.json.jbuilder

json.movies do
  json.array!(@movies) do |movie|
    json.name movie.name
    json.url movie_path(movie)
  end
end

json.directors do
  json.array!(@directors) do |director|
    json.name director.name
    json.url director_path(director)
  end
end

添加一个回调before_action: force_json, only: :search

这样浏览器输入的url后缀会被转化为.json

class MainController < ApplicationController
  
  private

  def force_json
    request.format = :json
  end
end

class MainController < ApplicationController
 ...

  def search
    @movies   = Movie.ransack(name_cont: params[:q]).result(distinct: true)
    @directors = Directors.ransack(name_cont: params[:q]).result(distinct: true).limit(5)
　　//name_cont限制查询的key是name
  end
end

(GoRails)在导航栏增加一个global自动的搜索功能。

Global Autocomplete Search

猜你喜欢