Global Autocomplete Search

需要用到一个JQuery插件和一个搜索对象的gem

EasyAutocomplete jQuery插件:

https://github.com/pawelczak/EasyAutocomplete

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

功能很强大，具体的看guide，写的很详细。

gem 'ransack'（4000✨）

一个面向对象的搜索：https://github.com/activerecord-hackery/ransack

我的app：见imac电脑 ~/自我练习/embeddable_comments ⮀ ⭠ autoquery ⮀

git上： https://github.com/chentianwei411/embeddable_comments

1. 激活一个Ajax request

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

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

第一步添加<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和*=require easy-autocomplete.thems

⚠️ 我使用unprocessed sass file。

#在assets/stylesheets/application.scss, 添加：

@import "easy-autocomplete";

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

看文档：http://easyautocomplete.com/guide#sec-data-file

先要在web page上添加一个<input id="basics">

然后在console上输入(图):

在网页山的input标签上输入任意字符都会出现options的data列表：

⚠️在rails console遇到一个❌：

Refused to load the script 'http://code.jquery.com/jquery-1.11.2.min.js' 
because it violates the following Content Security Policy directive: 
"script-src 'self' https: 'unsafe-eval'".

这是因为我使用vue.js后根据推荐的步骤加上了下面的代码：

Rails.application.config.content_security_policy do |policy|

  if Rails.env.development?

    policy.script_src :self, :https, :unsafe_eval, :unsafe_inline

  else

    policy.script_src :self, :https

  end

end

第二步：添加路径。

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:

第三步，设置controller

添加gem 'ransack'（4000✨）

一个面向对象的搜索：https://github.com/activerecord-hackery/ransack

支持Rails5.2

任何增强搜索的gem都可以，还可以使用searchkick(4600

巴特西

(GoRails)在导航栏增加自动的搜索功能（jquery插件：easyautocomplete)(gem 'ransack' 搜索对象4000✨）

Global Autocomplete Search

第一步添加<script>

⚠️在rails console遇到一个❌：

第二步：添加路径。

第三步，设置controller

最新文章

热门文章

巴特西

(GoRails)在导航栏增加自动的搜索功能（jquery插件：easyautocomplete)(gem 'ransack' 搜索对象4000✨）

Global Autocomplete Search

第一步添加<script>

⚠️在rails console遇到一个❌：

第二步： 添加路径。

第三步，设置controller

最新文章

热门文章

第二步：添加路径。