美文网首页前端前端开发那些事儿
vue 关键词搜索高亮显示

vue 关键词搜索高亮显示

作者: 安徒生1997 | 来源:发表于2021-03-16 14:48 被阅读0次

    <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);

    },

    相关文章

      网友评论

        本文标题:vue 关键词搜索高亮显示

        本文链接:https://www.haomeiwen.com/subject/uirdcltx.html