在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 调整select 位置的函数
Feb 21 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
如何用JS实现简单的数据监听
May 06 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面试题附答案
2009/01/07 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
javascript 写类方式之十
2009/07/05 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
娱乐节目策划方案
2014/06/10 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书