快捷導(dǎo)航

Vue關(guān)鍵字搜索功能實戰(zhàn)小案例

更新時間：2023年06月07日 14:35:25 作者：y17757773039

在vue項目中,搜索功能是我們經(jīng)常需要使用的一個場景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

頁面結(jié)果：

第一種

<body>
    <div id="app">
        <!-- 搜索框 -->
        <input type="text" v-model:value="keyword">
        <!-- 數(shù)據(jù)，遍歷filPerson-->
        <ul>
            <li v-for="p in filPerson" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                keyword:'',
                persons:[
                    {id:1,name:'知花實央',age:20},
                    {id:2,name:'虎杖悠仁',age:18},
                    {id:3,name:'切嗣',age:16},
                    {id:4,name:'衛(wèi)宮切嗣',age:33}
                ],
                filPerson:[]
            },
            //第一種寫法
            watch:{
                keyword:{
                     //初始化，在生成vue時，先執(zhí)行一遍handler
                    immediate:true,//作用：剛開始filPerson為空，所以要先給filPerson賦一次值
                    handler(val){
                        //person中包含val數(shù)據(jù)，賦值給filPerson
                        this.filPerson=this.persons.filter((p)=>{
                            return p.name.indexOf(val)!=-1
                        })
                    }
                }
            }

            //第二種寫法
            // computed:{
            //     filPerson(){
            //         return this.persons.filter((p)=>{
            //             return p.name.indexOf(this.keyword)!=-1
            //         })
            //     }
            // }
        })
    </script>
</body>

第二種

相較于watch寫法，computed寫法看上去更加簡潔，比如：

1、computed自身就是一種計算屬性，不必再去data中新建一個屬性。

2、計算屬性實時更新，不用像watch方法，新建的filPerson初始值為空,還需要手動開啟設(shè)置immediate=true初始化，令handler在vue實例創(chuàng)建后先運行一次，賦予初始值。

<body>
    <div id="app">
        <!-- 搜索框 -->
        <input type="text" v-model:value="keyword">
        <!-- 數(shù)據(jù) -->
        <ul>
            <li v-for="p in filPerson" :key="p.id">{{p.name}}-{{p.age}}</li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                keyword:'',
                persons:[
                    {id:1,name:'知花實央',age:20},
                    {id:2,name:'虎杖悠仁',age:18},
                    {id:3,name:'切嗣',age:16},
                    {id:4,name:'衛(wèi)宮切嗣',age:33}
                ],
                // filPerson:[]
            },
            //第一種寫法
            // watch:{
            //     keyword:{
            //          //初始化，在生成vue時，先執(zhí)行一遍handler
            //         immediate:true,//作用：剛開始filPerson為空，所以要先給filPerson賦一次值
            //         handler(val){
            //             //過濾掉不包含keyword數(shù)據(jù)，再賦值給filPerson
            //             this.filPerson=this.persons.filter((p)=>{
            //                 return p.name.indexOf(val)!=-1
            //             })
            //         }
            //     }
            // }
            //第二種寫法
            computed:{
                filPerson(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!=-1
                    })
                }
            }
        })
    </script>
</body>

其實watch方法和computed方法各有優(yōu)劣，computed方法自己就是一種計算屬性，很多時候直接給自己賦值，省去很多代碼；但是watch方法能夠做到跟多的細節(jié)操作，甚至computed能實現(xiàn)的，它都能實現(xiàn)，還能實現(xiàn)更多computed實現(xiàn)不了的細節(jié)。

補充：vue頁面實現(xiàn)文本關(guān)鍵字檢索，關(guān)鍵字高亮顯示及定位功能

實現(xiàn)原理

將相應(yīng)的關(guān)鍵字用標簽包裹，添加相應(yīng)的樣式，
使用 dom.scrollIntoView() 方法實現(xiàn)定位功能

代碼

html部分

<template>
    <div class="serach-box">                        
      <el-input                        
      placeholder="請輸入關(guān)鍵字"                        
      prefix-icon="el-icon-search"                        
      v-model="inputLogValue"                        
      clearable                        
      size="small"                        
      @keyup.enter.native='clickSearch'>                        
      </el-input>                        
      <el-button type="primary" size="small" icon="el-icon-search" @click="clickSearch"></el-button>                        
    <div class="searchRight">                            
       <span class="item" style='margin-right:5px'>{{curIndex}}/{{matchCount}}</span>                                                           
       <el-tooltip class="item" effect="dark" content="上一個" placement="top">                                                
         <el-button @click="searchLast" icon="el-icon-arrow-up" circle type="text" size="mini" :disabled="matchCount==0"></el-button>                            
       </el-tooltip>                            
       <el-tooltip class="item" effect="dark" content="下一個" placement="top">                                                              
         <el-button @click="searchNext" icon="el-icon-arrow-down" circle type="text" size="mini" :disabled="matchCount==0"></el-button>                            
       </el-tooltip>                         
     </div>                    
   </div>
   <div class="log_content" ref='log_content' v-if="searchStatus" v-html="contentShow"></div>
<template>
<style lang="scss" scoped>
  .serach-box{        
    display: flex;        
    .el-input{            
      width: 300px;            
      .el-input__inner{                
        border-right: none;            
      }        
    }        
    .el-button{            
      border-radius: 0;            
      height: 32px;            
      box-sizing: border-box;        
    }        
    .searchRight{            
      height: 32px;            
      line-height: 32px;            
      padding: 0 10px;            
      background: #eee;            
      font-size: 14px;            
      color: #666;           
        .el-button+.el-button{                
          margin-left: 0;            
        }        
      }    
    }
    .log_content{            
      width: 100%;            
      height: calc(100% - 40px);            
      line-height: 20px;            
      background-color: #333333;            
      color: #f0f0f0;            
      font-size: 13px;            
      overflow: overlay;            
      padding: 0 20px ;            
      overflow-x:hidden;            
      word-wrap: break-word;            
      white-space: pre-wrap;            
      box-sizing: border-box;            
      padding-bottom: 20px;
      &::-webkit-scrollbar {                
        width: 10px;                
        height: 7px;                
        background-color: rgba(245, 245, 245, 0.1);                
        cursor: pointer;                
        z-index: 10;            
      }
      &::-webkit-scrollbar-thumb {                
        height: 20px;                
        border-radius: 10px;                
        background-color: #dddee0;                
        cursor: pointer;                
        z-index: 10;
      }
      &::-webkit-scrollbar-thumb:hover {                
        cursor: pointer;                
        background-color: #c7c9cc;            
      }        
   }
</style>

js部分

data() {        
   return {            
    logMessage:'',            
    inputLogValue:'',            
    lightIndex: 0,            
    curIndex:0,            
    matchCount: 0,            
    highlightStyle:'background: #ffff00;color:red;',            
    currentStyle:'background: #ff9632',
  }
}，
watch：{
  inputLogValue: {            
    immediate: true,            
    handler (val) {                
      if(val==''){                            
        this.lightIndex=0                    
        this.curIndex=0                    
        this.matchCount=0                    
        this.searchStatus=0                
      }            
    }        
  },
}，
methods:{
  scrollTo (index) {            
    this.$nextTick(() => {                
      let list = this.$el.querySelectorAll(`.search-hightlight`)                
      if (list[index]) {                    
         this.lightIndex = index                     
         list[index].scrollIntoView()                
      }            
    })       
  },        
  searchNext () {            
    this.$nextTick(() => {                
      let idx                
      if(this.lightIndex >= this.matchCount-1){                    
        this.lightIndex = 0                    
        idx = 0                
      }else{                    
        idx = this.lightIndex + 1                
      }                
        this.scrollTo(idx)            
      })        
    },        
  searchLast () {            
    this.$nextTick(() => {                
      let idx                
      if(this.lightIndex <= 0){                    
        idx = this.matchCount - 1                    
        this.lightIndex = this.matchCount - 1                
      }else{                    
        idx = this.lightIndex - 1                
      }                
      this.scrollTo(idx)            
    })        
  },        
  getMatchCount () {            
    this.$nextTick(() => {                
      let list = this.$el.querySelectorAll(`.search-hightlight`)                
      this.matchCount = list.length            
    })        
  },
  clickSearch(){            
    let reg = new RegExp(this.inputLogValue, 'ig')            
    let stringList = this.logMessage.split(reg)            
    if (stringList.length) {                
      this.searchStatus = 1                
      this.contentShow = ''                
      this.lightIndex = 0                
      for (let i = 0; i < stringList.length - 1; i++) {                    
        let style = i === this.lightIndex ? this.currentStyle : this.highlightStyle                       
        this.contentShow += `${stringList[i]}<font style="${style}" class='search-hightlight'>${this.inputLogValue}</font>`                
      }                
      this.contentShow += stringList[stringList.length - 1]                
      this.getMatchCount()                
      this.scrollTo(this.lightIndex)            
    }        
  },
}