基於vue的實時搜尋，在結果中高亮顯示關鍵詞
阿新 • • 發佈：2019-01-06
1）利用oninput屬性來觸發搜素功能
2）利用RegExp來對字串來全域性匹配關鍵字，利用replace方法來對匹配的關鍵字進行嵌入高亮的<span class="gaoliang">標籤，最後利用v-html來嵌入html標籤來達到關鍵字高亮顯示
程式碼
1）HTML 搜尋框部分繫結input事件（搜尋框獨立出來，作為一個基礎元件（叫SearchToolbar.vue），嵌入到KnowledgeSearch.vue中）
<input type="text" class="input-search" placeholder="請輸入搜尋內容" v-model.trim="searchKey"@input="searchEvent" ref="searchInput" autocomplete="off" autocapitalize="off" autocorrect="off"/>
v-html與Reg為搜尋結果的關鍵字高亮顯示
這一步是在展示資料的元件上做的。
4.1）HTML結果資料展示部分
| 1 | <div class="title-info" v-html="ruleTitle"></div> |
4.2）js部分
| 1234567891011121314151617181920212223242526 | import httpService from '@/services/HttpService';<script>export default{props: {// 每一條帶關鍵字的結果物件，父元件傳過來的item: {},},computed: {ruleTitle() {let titleString = this.item.name;if (!titleString) {return '';}if (this.searchValue && this.searchValue.length > 0) {// 匹配關鍵字正則let replaceReg = new RegExp(this.searchValue, 'g');// 高亮替換v-html值let replaceString = '<span class="search-text">' + this.searchValue + '</span>';// 開始替換titleString = titleString.replace(replaceReg, replaceString);}return titleString;}},}</script> |