vue 关键词搜索高亮显示

<input class="uni-input" @input="searchText" placeholder="请输入搜索内容" />

searchText(e){

console.log(e.target.value)

if(e.target.value!=''){

this.$request('/Api/xxxxx', {

keyword:e.target.value

}).then(res => {

// 打印调用成功回调

// console.log(res)

this.changeColor(e.target.value,res.list)

})

}

},

changeColor (keyWords,resultsList) {

resultsList.map((item, index) => {

if (keyWords && keyWords.length > 0) {

// 匹配关键字正则

let replaceReg = new RegExp(keyWords, 'g');

// 高亮替换v-html值,渲染时用<rich-text :nodes="item.title"></rich-text>

let replaceString ='<span class="search-text">' + keyWords + '</span>'

resultsList[index].title = item.title.replace(replaceReg,replaceString)

}

});

this.results = [];

this.list = resultsList;

console.log(this.list);

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容