在vue项⽬实现⼀个ctrl+f的搜索功能
这次在项⽬中遇到了⼀个要做⼀个搜索功能，因为项⽬是vue的，⽽且是在⼿机端，所以对这个搜索功能的实现和能做到什么样⼦都没有底，在⽹上研究了⼀会，发现⼤家的解决⽅法都各有
特⾊，有引⼊第三⽅包的，有遍历的，确实都可以实现，但我觉得在vue中这样的⽅法也太过繁琐了，于是经过⼀段时间的查询与思索后我⾃⼰写了个简单的⽅法，并记录下⾃⼰思索的过程
第⼀步
明确寻求产品的⼀万种奇怪要求
对于开发来说，应该要知道⾃⼰需要什么，不需要什么，理解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" @="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 !== '') { //若搜索词不为空，对搜索词进⾏替换
place(new RegExp(searchitem, 'g'), '<a >' + searchitem + '</a>');
} else {
return item;
}
},
到此，动态输⼊标红搜索词的功能已经做好了，但是搜索框还有⼀个回车事件我觉得在实际上也应该有点⽤，⽐如跳到第⼀个关键词什么的，这个时候，我⼜看见了⼀个神奇的⽅法
当页⾯可以⽀持滑动时，scrollIntoView可以把对于元素滑倒页⾯顶部（默认），也可以通过参数赋值给false让对应元素赋值到底部，仅⽀持原⽣js，jQuery中没有这个⽅法，那么问题来了，我上⾯替换出了那么多a标签，怎么能让他们排好队⼀个⼀个被调⽤了，那当然只能遍历了，但是原⽣js中没有jQuery中eq那样的选择器，怎么才能让js知道我要的是第n个a标签呢
submit(){
let num = ElementsByTagName("a").length;  //获取所有a标签的数量，这个页⾯所有的a标签都是由查询替换获得的，所以a标签的数量可以当场查询到关键词的数量
if(num != 0){ //如果查询关键词存在，跳到第⼀个关键词的位置，标头增1，⾛满⼀圈归0
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" @="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.Item('lawcontent'))
console.log(this.datelist.lawTypeName)
},
methods: {
changeColor(item) {
let searchitem = this.searchitem;
console.log(this.datelist.lawTypeName);
if (searchitem !== '') {
place(new RegExp(searchitem, 'g'), '<a id="seach" >' + searchitem + '</a>');
} else {
return item;
}
},
submit(){
let num = ElementsByTagName("a").length;  //获取所有a标签的数量，这个页⾯所有的a标签都是由查询替换获得的，所以a标签的数量可以当场查询到关键词的数量
if(num != 0){ //如果查询关键词存在，跳到第⼀个关键词的位置，标头增1，⾛满⼀圈归0
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; */
jquery在项目里是干啥的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 搜索内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。