搜索匹配关键字 并使用防抖

搜索匹配关键字并高亮显示

1.1 思路分析

• 定义一个搜索关键字 serach 和一个搜索关键字的数组thinkList
• 获取用户输入的内容 发送一个查询接口 返回数据 例如返回options里面嵌套数组
• 使用Map方法返回一个新数组
• 使用防抖 性能优化
• 代码实现

serachKeyWord(item){
    // 清除定时器
    clearTimeout(this.timer)
    this.timer = setTimeout(async()=>{
    this.search = item
    // 非空判断
    if(this.search.trim().length===0){
        return false
    }
    // 发送请求到服务器
    let res = await apiGetSearch(this.$http,this.search)
    // 对返回回来的数据进行处理
    this.thinkList = res.options.map(item=>{
    return{
        // 关键字变红处理
        colorItem:`<span style="color:red">${this.search}</span>`,
        item:item
    }
    })
    },300)
}