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