在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操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP制作万年历
2015/01/07 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
javascript History对象原理解析
2020/02/17 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
Python的另外几种语言实现
2015/01/29 Python
Python笔记之观察者模式
2019/11/20 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python常量折叠基础知识点讲解
2021/02/28 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
2015年市场部工作总结
2015/04/30 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
初二物理教学反思
2016/02/19 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis