怎么在vue項目中實現(xiàn)一個ctrl+f搜索功能

怎么在vue項目中實現(xiàn)一個ctrl+f搜索功能？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供德安網(wǎng)站建設(shè)、德安做網(wǎng)站、德安網(wǎng)站設(shè)計、德安網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、德安企業(yè)網(wǎng)站模板建站服務(wù)，十余年德安做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

首先代碼結(jié)構(gòu)如下：

<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"> //頁面內(nèi)容部分，具體內(nèi)容由后端傳入的datelist中的lawContent提供
   <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
  </div>
 </div>
</template>

搜索內(nèi)容把對應(yīng)內(nèi)容變?yōu)榧t色的函數(shù)就是changeColor

changeColor(item) {
  let searchitem = this.searchitem;  //獲取動態(tài)變化的搜索詞
  if (searchitem !== '') { //若搜索詞不為空，對搜索詞進行替換
   return item.replace(new RegExp(searchitem, 'g'), '<a  >' + searchitem + '</a>');
  } else {
   return item;
  }
 },

到此，動態(tài)輸入標紅搜索詞的功能已經(jīng)做好了，但是搜索框還有一個回車事件我覺得在實際上也應(yīng)該有點用，比如跳到第一個關(guān)鍵詞什么的，這個時候，我又看見了一個神奇的方法

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

當頁面可以支持滑動時，scrollIntoView可以把對于元素滑倒頁面頂部（默認），也可以通過參數(shù)賦值給false讓對應(yīng)元素賦值到底部，僅支持原生js，jQuery中沒有這個方法，那么問題來了，我上面替換出了那么多a標簽，怎么能讓他們排好隊一個一個被調(diào)用了，那當然只能遍歷了，但是原生js中沒有jQuery中eq那樣的選擇器，怎么才能讓js知道我要找的是第n個a標簽?zāi)?/p>

submit(){
    let num = document.getElementsByTagName("a").length;  //獲取所有a標簽的數(shù)量，這個頁面所有的a標簽都是由查詢替換獲得的，所以a標簽的數(shù)量可以當場查詢到關(guān)鍵詞的數(shù)量
    if(num != 0){ //如果查詢關(guān)鍵詞存在，跳到第一個關(guān)鍵詞的位置，標頭增1，走滿一圈歸0
     document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用，jquery中沒有這個方法，參數(shù)默認是true，將這個元素置于頁面第一行（如果頁面可以滑動函數(shù)才生效）
     if(this.searchhead < (num - 1)){
      this.searchhead += 1;
     }else if(this.searchhead == (num - 1)){
      this.searchhead = 0;
     }
    }
   },

原來，getElementsByTagName(“a”)返回的是帶有指定標簽名的對象的集合。通過對數(shù)組的序列的調(diào)用就可以完成對方法的依次調(diào)用。
至此，這個簡單頁面的功能已基本實現(xiàn)，

源碼

<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  id="seach" >' + searchitem + '</a>');
  } else {
   return item;
  }
 },
   submit(){
    let num = document.getElementsByTagName("a").length;  //獲取所有a標簽的數(shù)量，這個頁面所有的a標簽都是由查詢替換獲得的，所以a標簽的數(shù)量可以當場查詢到關(guān)鍵詞的數(shù)量
    if(num != 0){ //如果查詢關(guān)鍵詞存在，跳到第一個關(guān)鍵詞的位置，標頭增1，走滿一圈歸0
     document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用，jquery中沒有這個方法，參數(shù)默認是true，將這個元素置于頁面第一行（如果頁面可以滑動函數(shù)才生效）
     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>

看完上述內(nèi)容，你們掌握怎么在vue項目中實現(xiàn)一個ctrl+f搜索功能的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前名稱：怎么在vue項目中實現(xiàn)一個ctrl+f搜索功能
標題路徑：http://muchs.cn/article46/ieheeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、、小程序開發(fā)、網(wǎng)站設(shè)計、電子商務(wù)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司