监听输入框的关键字并在列表中显示高亮

最新推荐文章于 2021-10-18 21:20:44 发布

正一品程序员

最新推荐文章于 2021-10-18 21:20:44 发布

阅读量230

点赞数

文章标签： html vue

本文链接：https://blog.csdn.net/weixin_46060121/article/details/115266097

版权

该博客内容涉及前端搜索功能的实现，通过监听输入框变化，调用handleInputSearch方法进行搜索。搜索结果使用v-for遍历并显示，同时利用brightKeyword方法对搜索关键词进行高亮处理，将搜索关键字用特定颜色突出显示。博客主要探讨了前端搜索及高亮显示的实现技巧。

摘要由CSDN通过智能技术生成

<input type="text" v-model="searchValue" @input="handleInput">
 <ul>
     <li v-for="(item,index) in searchResultList" :key="index" v-html="item.Title"></li>
 </ul>

  methods:{
    /* 监听输入 */
    handleInput(){
      if(this.searchValue){
        help.handleInputSearch(this.searchValue).then(res=>{
          this.searchResultList=res.Body  //将请求回来的数据保存至searchResultList
        }).then(()=>{
          if(this.searchResultList!==null){
            this.searchResultList.map((item) => {
              item.Title = this.brightKeyword(item.Title)
            })
          }
        })
      }
    },
    //高亮的方法
    brightKeyword(val) {
      let keyword = this.searchValue   //获取输入框输入的内容
      if (val.indexOf(keyword) !== -1) {  //判断这个字段中是否包含keyword
        //如果包含的话，就把这个字段中的那一部分进行替换成html字符
        return val.replace(keyword, `<font color='#4f9cfd'>${keyword}</font>`)
      }else{
        return val
      }
    },
  }