(GoRails)在导航栏增加自动的搜索功能（jquery插件：easyautocomplete)(gem 'ransack' 搜索对象4000✨）
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✨）的更多相关文章
- Dynamics CRM2015 页面导航栏顶部全局快速查找功能配置
在CRM2015中微软加入了新的快速查找功能,让你的数据查找更加方便,功能栏如下图所示,直接可以框中输入搜索项进行搜索. 但该功能是需要进行些配置,具体的配置在设置-管理-系统设置中,默认的就是红框中 ...
- Android搜索功能的案例，本地保存搜索历史记录......
开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示: 本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...
- zblog实现后台导航栏增加链接功能的最简单方法
首先在ftp中找到这个目录 zb_system/admin/ 然后找到 admin_top.php 这个文件 再然后找到这行代码 <?php ResponseAdm ...
- iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能
emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...
- Yii 1开发日记 -- 后台搜索功能下拉及关联表搜索
Yii 1 实现后台搜索,效果如下: 一. 下拉搜索: 1.模型中和常规的一样 if (isset($_GET['agency']['status']) && $_GET['agenc ...
- 关键字搜索高亮jQuery插件
// textSearch.js v1.0 文字,关键字的页面纯客户端搜索// 2010-06-23 修复多字母检索标签破碎的问题// 2010-06-29 修复页面注释显示的问题// 2013-05 ...
- 【微收藏】来自Twitter的自动文字补齐jQuery插件 - Typeahead.js
没图没逼格 事发有因 该插件可以结合本地数据进行一些操作.推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage.IndexedDB.离线缓存manifest文件 ...
- iOS系统中导航栏的转场解决方案与最佳实践
背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...
- 使用vue给导航栏添加链接
如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...
随机推荐
- spring动态创建数据源
在最近的项目业务中,需要在程序的运行过程中,添加新的数据库添链接进来,然后从新数据库链接中读取数据. 网上查阅了资料,发现spring为多数据源提供了一个抽象类AbstractRoutingDataS ...
- Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 内核中的xenfs是什么?
答: 是一个xen虚拟机高性能搜索文件系统,它基于共享内存通信协议和共享缓冲区缓存.
- 1823: [JSOI2010]满汉全席 2-sat
链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1823 思路 建图,缩点tarjan 判断impossible 代码 #include < ...
- 题解——洛谷P1962 斐波那契数列（矩阵乘法）
矩阵乘法加速线性递推的典型 大概套路就是先构造一个矩阵\( F \)使得另一初始矩阵\( A \)乘以\( F^{x} \)能够得出第n项 跑的飞快 虽然我也不知道那个矩阵要怎么构造 或许就像我使用了 ...
- 文件IO（2）
Lseek: *************************************************************************** 实验一: ...
- Java创建对象的几种方式。
Java创建对象的几种方式(重要): (1) 用new语句创建对象,这是最常见的创建对象的方法. (2) 运用反射手段,调用java.lang.Class或者java.lang.reflect.Con ...
- 爬虫系列之requests
爬取百度内容: import requests url = "https://www.baidu.com" if __name__ == '__main__': try: kv = ...
- CSU 2005 Nearest Maintenance Point（最短路+bitset）
https://vjudge.net/problem/CSU-2005 题意:给出带权值的图,图上有一些特殊点,现在给出q个询问,对于每个询问,输出离该点最近的特殊点,如果有多个,则按升序输出. 思路 ...
- Python 爬虫常用的库
一.常用库 1.requests 做请求的时候用到. requests.get("url") 2.selenium 自动化会用到. 3.lxml 4.beautifulsoup 5 ...