在vue项目实现一个ctrl+f的搜索功能


Posted in Javascript onFebruary 28, 2020

这次在项目中遇到了一个要做一个搜索功能,因为项目是vue的,而且是在手机端,所以对这个搜索功能的实现和能做到什么样子都没有底,在网上研究了一会,发现大家的解决方法都各有特色,有引入第三方包的,有遍历的,确实都可以实现,但我觉得在vue中这样的方法也太过繁琐了,于是经过一段时间的查询与思索后我自己写了个简单的方法,并记录下自己思索的过程

在vue项目实现一个ctrl+f的搜索功能

第一步

明确寻求 产品的一万种奇怪要求
对于开发来说,应该要知道自己需要什么,不需要什么,理解pm的需求,把功能以最符合ue的样子呈现出来,而这次的功能需求是非常简单明了的,一个搜索框,底下是文章,搜索框输入的时候动态标红,按下回车会跳到标红的位置,简单明了

第二步

寻找灵感 百度救我

对于已经有过开发经验的人来说,可能把自己以前的代码拿去复用就可以解决问题,但对于我这种第一次开发的菜鸡来说,对搜索功能的实现竟然毫无头绪,这种在身边随处可见的功能,竟然没有细想过具体的实现流程,幸好,现代人的视野就是搜索引擎的视野,去百度上转了一圈之后,见到了各种各样的方法,但他们都有一个共同点,太复杂了,复杂到我看到就有点不太想用,虽然我是那种虽然代码能成功运行就等于没问题的三流选手,但是看到太过复杂的代码也很影响我一天的心情,所以我选择了更为简单的方法

第三步

进入开发 bug的无数种奇怪炼成方式
首先我的代码结构如下:

<template>
 <div>
  <div class="header"> //页面头部,搜索框部分
   <div class="search-total">
    <div class="search_model_zt">
     <div class="search">
      <div class="search_icon"><img :src="require('img/search.png')" /></div>
      <div class="search_input"><input v-model="searchitem" @keyup.enter="submit" placeholder="搜索条文" /></div>
     </div>
    </div>
   </div>
  </div>
  <div class="law-content"> //页面内容部分,具体内容由后端传入的datelist中的lawContent提供
   <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
  </div>
 </div>
</template>

搜索内容把对应内容变为红色的函数就是changeColor

changeColor(item) {
  let searchitem = this.searchitem;  //获取动态变化的搜索词
  if (searchitem !== '') { //若搜索词不为空,对搜索词进行替换
   return item.replace(new RegExp(searchitem, 'g'), '<a style="color:red" >' + searchitem + '</a>');
  } else {
   return item;
  }
 },

到此,动态输入标红搜索词的功能已经做好了,但是搜索框还有一个回车事件我觉得在实际上也应该有点用,比如跳到第一个关键词什么的,这个时候,我又看见了一个神奇的方法

document.getElementsByTagName("a").scrollIntoView();

当页面可以支持滑动时,scrollIntoView可以把对于元素滑倒页面顶部(默认),也可以通过参数赋值给false让对应元素赋值到底部,仅支持原生js,jQuery中没有这个方法,那么问题来了,我上面替换出了那么多a标签,怎么能让他们排好队一个一个被调用了,那当然只能遍历了,但是原生js中没有jQuery中eq那样的选择器,怎么才能让js知道我要找的是第n个a标签呢

submit(){
    let num = document.getElementsByTagName("a").length;  //获取所有a标签的数量,这个页面所有的a标签都是由查询替换获得的,所以a标签的数量可以当场查询到关键词的数量
    if(num != 0){ //如果查询关键词存在,跳到第一个关键词的位置,标头增1,走满一圈归0
     document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用,jquery中没有这个方法,参数默认是true,将这个元素置于页面第一行(如果页面可以滑动函数才生效)
     if(this.searchhead < (num - 1)){
      this.searchhead += 1;
     }else if(this.searchhead == (num - 1)){
      this.searchhead = 0;
     }
    }
   },

原来,getElementsByTagName(“a”)返回的是带有指定标签名的对象的集合。通过对数组的序列的调用就可以完成对方法的依次调用。
至此,这个简单页面的功能已基本实现,

源码

<script src="../axios/axios.js"></script>
<template>
 <div>
  <div class="header">
   <div class="search-total">
    <div class="search_model_zt">
     <div class="search">
      <div class="search_icon"><img :src="require('img/search.png')" /></div>
      <div class="search_input"><input v-model="searchitem" @keyup.enter="submit" placeholder="搜索条文" /></div>
     </div>
    </div>
   </div>
  </div>
  <div class="law-content">
   <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
  </div>
 </div>
</template>
<script>
 require('../utils/js/jquery.min.js');
 export default {
  data() {
   return {
    datelist: null,
    searchitem: '',
    searchnum:null,
    searchhead:0,
   };
  },
  created() {
   this.datelist = JSON.parse(sessionStorage.getItem('lawcontent'))
   console.log(this.datelist.lawTypeName)
  },
  methods: {
  changeColor(item) {
  let searchitem = this.searchitem;
  console.log(this.datelist.lawTypeName);
  if (searchitem !== '') {
   return item.replace(new RegExp(searchitem, 'g'), '<a style="color:red" id="seach" >' + searchitem + '</a>');
  } else {
   return item;
  }
 },
   submit(){
    let num = document.getElementsByTagName("a").length;  //获取所有a标签的数量,这个页面所有的a标签都是由查询替换获得的,所以a标签的数量可以当场查询到关键词的数量
    if(num != 0){ //如果查询关键词存在,跳到第一个关键词的位置,标头增1,走满一圈归0
     document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用,jquery中没有这个方法,参数默认是true,将这个元素置于页面第一行(如果页面可以滑动函数才生效)
     if(this.searchhead < (num - 1)){
      this.searchhead += 1;
     }else if(this.searchhead == (num - 1)){
      this.searchhead = 0;
     }
    }else{
    }
   },
 }
 };
</script>
<style scoped>
 #content {
  white-space: pre-line;
 }
 .header {
  width: 100%;
  top: 0px;
  background: white;
  padding: 8px 8px;
  border-bottom: 2px solid #f5f5f5;
 }
 .search-total {
  width: 100%;
  height: auto;
 }
 .search_model_zt {
  height: 35px;
  background: #fff;
 }
 .search {
  width: 100%;
  /* margin: auto; */
  border-radius: 30px;
  background-color: #f3f3f3;
  height: 32px;
  position: relative;
 }
 .search_icon {
  position: absolute;
  left: 5%;
  top: 7px;
  width: 16px;
  height: 16px;
 }
 .search_icon img {
  width: 100%;
  height: 100%;
 }
 .search_input {
  margin-left: 14%;
 }
 .search_input input {
  background: none;
  border: none;
  height: 34px;
  width: 100%;
 }
 input {
  outline: none;
  border: 0;
  background: none;
  font-size: 0.9rem;
 }
 .law-content {
  width: 100%;
  height: calc(100% - 95px);
  padding: 27px 18px 40px 16px;
  position: fixed;
  overflow: auto;
 }
 .law-content div {
  color: rgba(85, 85, 85, 1);
  font-size: 14px;
 }
</style>

总结

到此这篇关于在vue项目实现一个ctrl+f的搜索功能的文章就介绍到这了,更多相关vue ctrl+f 搜索内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 #Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 #Javascript
JsonServer安装及启动过程图解
Feb 28 #Javascript
Vue自定义组件的四种方式示例详解
Feb 28 #Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 #Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 #Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 #Javascript
You might like
用PHP实现小型站点广告管理
2006/10/09 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php自定义session示例分享
2014/04/22 PHP
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python统计日志ip访问数的方法
2015/07/06 Python
python sort、sort_index方法代码实例
2019/03/28 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
测试工程师职业规划书
2014/02/06 职场文书
商业房地产广告语
2014/03/13 职场文书
双拥工作宣传标语
2014/06/26 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
合作经营协议书范本
2014/09/16 职场文书
会议通知
2015/04/15 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP