快捷導(dǎo)航

vue搜索高亮popsearch組件的實(shí)現(xiàn)示例

更新時(shí)間：2023年09月27日 11:14:10 作者：啥咕啦嗆

有時(shí)候給頁面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下

背景

最近項(xiàng)目中需要制作一個(gè)搜索高亮的組件（如下圖展示），今天分享一下這個(gè)組件功能。希望能拋磚引玉，給大家?guī)韱l(fā)。

需求功能

我們需要一個(gè)輸入框，比如用來搜索網(wǎng)站的所有菜單，這個(gè)時(shí)候搜索結(jié)果高亮顯示。

1.搜索關(guān)鍵詞篩選；

2.關(guān)鍵詞鍵入篩選；

3.關(guān)鍵詞列表高亮；

設(shè)計(jì)開發(fā)

先說一下我的開發(fā)環(huán)境版本：

node: v11.3.0
npm: 6.4.1
vue：2.5.11

如果不是以上版本也沒關(guān)系，今日分享的思路，相信你可以自己造出來~

1.先做html排版，簡(jiǎn)單的用position相對(duì)定位來做哈：

<div class='popcover'>
   <input type="text" class="z-input" placeholder="請(qǐng)輸入" v-model="data">
   <div class="popcoverbox">
      <p v-if="!list.filter(one=>one.name.includes(data)).length"> 無數(shù)據(jù) </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賦上對(duì)應(yīng)的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.方法高亮定義：

 // 搜索關(guān)鍵詞高亮
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>`)
},

本組件只用于學(xué)習(xí)交流哈！暫時(shí)沒有定義父級(jí)傳入?yún)?shù)哈，效果如下：