(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:{ ' ...
随机推荐
- maven 新建项目时报错“Could not calculate build plan: Failure to transfer org.apache.maven.plugins:。。。。。。。。。。。。。。”
首先,我们看到观察这个错误:Failure to transfer org.apache.maven.plugins,这种错误是项目部署时,maven所关联的仓库中插件的设置出错了. 所以我们需要找到 ...
- linux内核中侧async_tx是什么?
答: 异步内存传输api(asynchronous memory transfer/transform API),这是一种api,用来为应用提供操作DMA的API. 下图是async_tx在架构中所处 ...
- .NET BackgroundWorker的一般使用方式
代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
- 【Dalston】【第二章】客户端负载均衡(Ribbon)
对于大型应用系统负载均衡(LB:Load Balancing)是首要被解决一个问题.在微服务之前LB方案主要是集中式负载均衡方案,在服务消费者和服务提供者之间又一个独立的LB,LB通常是专门的硬件,如 ...
- computed 计算选项
computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 格式化输出结果 我们先来做个读出价格的例子:我们读书的原始数据是price:100 ...
- [学习一个] Matlab GUI 学习笔记 Ⅰ
Matlab GUI 学习笔记 Ⅰ 1. Foreword Matlab 是严格意义上的编程语言吗?曾经有人告诉我他是通过 Matlab 学会了面对对象编程,我是不信的,但这依然不妨碍它在特殊领域的强 ...
- Lintcode27-Reverse 3-digit Integer
Reverse a 3-digit integer. Example Example 1: Input: number = 123 Output: 321 Example 2: Input: numb ...
- Codeforces Round #367 (Div. 2) D. Vasiliy's Multiset（01字典树求最大异或值）
http://codeforces.com/contest/706/problem/D 题意:有多种操作,操作1为在字典中加入x这个数,操作2为从字典中删除x这个数,操作3为从字典中找出一个数使得与给 ...
- HDU 5791 Two（LCS求公共子序列个数）
http://acm.split.hdu.edu.cn/showproblem.php?pid=5791 题意: 给出两个序列,求这两个序列的公共子序列的总个数. 思路: 和LCS差不多,dp[i][ ...
- MVC ---- 去掉HTML过滤
在方法头上添加特效 [ValidateInput(false)] 富文本框提交的内容就可以顺利提交到后台了.