在Vue中製作搜尋highlight[part1]

製作過程講得好像太細所以分幾part來說明

• 想要的效果
• 刻一個基礎的雛形
• 用filter()將資料篩選出來!!!
• 將搜尋字標記出來
• 尚餘的問題
• 成品嘗鮮

先來看一下完成的效果

---

---

想要的效果

1. 在搜尋的時候需要根據關鍵字篩選出具有關鍵字的項目
2. 符合的關鍵字要上色且不改變原本大小寫

刻一個基礎的雛形

<template>
  <div id="search-word">
    <input type="text"
      v-model="search"
      class="search"
      maxlength="20"
      placeholder="要搜尋的評論">
    <ul class="comments">
      <li class="comment" v-for="item in comments" :key="item.id">
        <span class="title">{{item.text}}</span>
        <span class="comment-id">{{item.id}}</span>
      </li>
    </ul>
  </div>
</template>

一開始的資料設定如下

data () {
  return {
    search: '',
    comments : [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ]
  }
}

css的部分不是這次的重點先跳過

初始化的狀態長這樣

用filter()將資料篩選出來!!!

這裡要用一個computed來將比對資料和輸入的字是否相符

將相符合的項目濾出

在這裡使用正規表達式作為判斷

computed: {
  matchWord () {
    let regWord = new RegExp(this.search, 'gi')
    return this.comments.filter(item => item.text.match(regWord) || item.id.toString().match(regWord))
  }
}

WARNING

原始資料的id是數字型別👈

接下來將修改原先一下template的內容

<li class="comment" v-for="item in matchWord" :key="item.id">
  <span class="title">{{item.text}}</span>
  <span class="comment-id">{{item.id}}</span>
</li>

將搜尋字標記出來

透過function將搜尋關鍵字加上一個上色的class名稱

methods: {
  highlight (text) {
    let regWord = new RegExp(this.search, 'gi')
    return text.replace(regWord, `<span class="hl">${this.search}</span>`)
  }
}

接著修改template的內容

<li class="comment" v-for="(item, index) in matchWord" :key="item.id">
  <span class="title" v-html="highlight(item.text)"></span>
  <span class="comment-id" v-html="highlight(item.id.toString())"></span>
</li>

到這裡就可以看到畫面上可以根據自己的關鍵字上色

所以我們算是完工拉~!!!! (????

修但幾勒

到現在還會有一些小問題

尚餘的問題

• 原本的內容上色後會把大小寫替換掉
• 沒有輸入字的時候會穿插很多空的<span class="hl"></span>在文字中間

中文的話比較沒問題

但英文的處理比較複雜

留到下一part再繼續說明

成品嘗鮮

先把完成品放這

• Love this!523423
• Super good823423
• You are the best2039842
• Ramen is my fav food ever123523
• Nice Nice Nice!542328