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✨）的更多相关文章

  1. Dynamics CRM2015 页面导航栏顶部全局快速查找功能配置

    在CRM2015中微软加入了新的快速查找功能,让你的数据查找更加方便,功能栏如下图所示,直接可以框中输入搜索项进行搜索. 但该功能是需要进行些配置,具体的配置在设置-管理-系统设置中,默认的就是红框中 ...

  2. Android搜索功能的案例，本地保存搜索历史记录......

    开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示:  本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...

  3. zblog实现后台导航栏增加链接功能的最简单方法

    首先在ftp中找到这个目录   zb_system/admin/ 然后找到    admin_top.php      这个文件 再然后找到这行代码      <?php ResponseAdm ...

  4. iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能

    emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...

  5. Yii 1开发日记 -- 后台搜索功能下拉及关联表搜索

    Yii 1 实现后台搜索,效果如下: 一. 下拉搜索: 1.模型中和常规的一样 if (isset($_GET['agency']['status']) && $_GET['agenc ...

  6. 关键字搜索高亮jQuery插件

    // textSearch.js v1.0 文字,关键字的页面纯客户端搜索// 2010-06-23 修复多字母检索标签破碎的问题// 2010-06-29 修复页面注释显示的问题// 2013-05 ...

  7. 【微收藏】来自Twitter的自动文字补齐jQuery插件 - Typeahead.js

    没图没逼格 事发有因 该插件可以结合本地数据进行一些操作.推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage.IndexedDB.离线缓存manifest文件 ...

  8. iOS系统中导航栏的转场解决方案与最佳实践

    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...

  9. 使用vue给导航栏添加链接

    如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...

随机推荐

  1. python ---16 初识面向对象

    面向对象 一 .面向对象和面向过程比较 ①面向过程:一切以事物的发展流程为核心    优点:负责的问题流程化,编写相对简单 缺点:可扩展性差 ②面向对象:一切以对象为中心. 一切皆为对象. 具体的某一 ...

  2. topcoder srm 485 div1

    problem1 link 枚举第一个数和第二个数即可确定公差. problem2 link 设高度为$n$,宽度为$m$,且$n \ge m$ 如果$m \ge 5$,那么答案为0.这个可以通过抽屉 ...

  3. 3.sql2008查询

    根据需要和条件,查看并显示结果集,如果需要,可将结果集生成数据表select:查什么,列筛选,可以用*代表全部列from:在哪个表中查,where:符合什么样的条件,行筛选select:       ...

  4. ODAC（V9.5.15) 学习笔记（五）TSmartQuery

    TSmartQuery是相对于TOraQuery更简洁的数据集,其成员如下 名称 类型 说明 Expand Boolean 缺省为False,如果为True,则表示无论SQL中罗列的字段是哪些,数据集 ...

  5. TCPCopy 使用方法

    TCPCopy 使用方法 TCPCopy是一种请求复制(所有基于tcp的packets)工具,可以把在线请求导入到测试系统中去.目前此工具已经广泛应用于国内各大互联网公司. TCPCopy七大功能 1 ...

  6. js 二分搜索树删除子节点

    删除的节点含有左子树或者右子树,用其子树来代替成为被删除节点的父节点的子树 删除左右都有孩子的节点,找到右边子树最小的节点作为父节点

  7. How can I move a MySQL database from one server to another?

    My favorite way is to pipe a sqldump command to a sql command. You can do all databases or a specifi ...

  8. LuoguP1072 Hankson的趣味题

    题目 原题链接 题解 题意即为 \[ gcd(x,a0)=a1 \\ lcm(x,b0)=b1 \\ 求x个数 \] 根据\(lcm\)的求解方式\(lcm(a,b)=a*b/gcd(a,b)\)可以 ...

  9. Docker Engine SDKs and API 的开发1

    Develop with Docker Engine SDKs and API Docker provides an API for interacting with the Docker daemo ...

  10. jvm 内存溢出问题排查方法

    如果你做TCP通讯或者map集合操作,并发处理等功能时,很容易出现 Java 内存溢出的问题.本篇文章,带领大家深入jvm,分析并找出jvm内存溢出的代码. jvm中除了程序计数器,其他的区域都有可能 ...