vue框架下搜索关键词高亮实现方法

最近项目中需要制作一个搜索高亮的组件（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。

功能需求：我们需要一个输入框，比如用来搜索网站的所有菜单，这个时候搜索结果高亮显示。

1、搜索关键词筛选；

2、关键词键入筛选；

3、关键词列表高亮；

开发环境版本：

node: v11.3.0、npm: 6.4.1、vue：2.5.11

如果不是以上版本也没关系，今日分享的思路，可以根据自己的版本来操作。

1、先做html排版，简单的用position相对定位来做哈：

<div class='popcover'>
   <input type="text" class="z-input" placeholder="请输入" v-model="data">
   <div class="popcoverbox">
      <p v-if="!list.filter(one=>one.name.includes(data)).length"> 无数据 </p>
      <ul>
        <li v-for="one in list.filter(one=>one.name.includes(data))" :key="one.id" v-html="searchNamefilter(one.name)" ></li>
      </ul>
   </div>
 </div>

2、给html赋上对应的css(sass):

.z-input{
  outline: none;
  line-height: 30px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 10px;
  &:focus{
    border-color: #1676ff;
    + .popcoverbox{
      display: block;
    }
  }
}
.popcover{
  position: relative;
}
.popcoverbox{
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  min-width: 200px;
  min-height: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 3px 4px 3px #eee;
  background: #fff;
  line-height: 30px;
  padding: 0;
  p{
    color: #999;
    padding: 0;
    margin: 0;
    border: 0;
    text-indent: 10px;
  }
  ul{
    padding: 0;
    margin: 0;
    border: 0;
    li{
      margin: 0;
      border: 0;
      box-sizing: border-box;
      width: 100%;
      text-indent: 10px;
      cursor: pointer;
      &:hover{
        color: #333;
        background-color: #eee;
      }
      &.hover{
        color: #1676ff;
        background-color: #e8f1ff;
      }
    }
  }
}

3、给出变量定义：

data:"",
list:[
  {
    id: 0,
    name:'张三'
  },
  {
    id: 1,
    name:'赵四'
  },
  {
    id: 2,
    name:'周四'
  },
  {
    id: 3,
    name:'郑三'
  },
]
}

4、方法高亮定义：

 // 搜索关键词高亮
searchNamefilter(name){
  if(!name)return
  let key = this.data;
  const reg = new RegExp(key, 'ig');
  return name.replace(reg, `<span style="color:red">${key}</span>`)
},

最终效果如下：

好了，今天为大家分享的关于vue框架下搜索关键词高亮实现方法的内容就是这些，希望对你的网站建设有所帮助。