在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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
vue中使用ueditor富文本编辑器
Feb 08 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue实现分页组件
2020/06/16 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Python命名空间详解
2014/08/18 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python tkinter实现日期选择器
2021/02/22 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
警示教育活动总结
2014/05/05 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
导游词之镜泊湖
2019/12/09 职场文书