H5项目输入框搜索相关业务功能

最新推荐文章于 2024-07-30 16:49:30 发布

画了五官的猕猴

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量559

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/126822121

版权

输入搜索内容列表展示关键字高亮

<!-- 输入搜索 列表展示相关内容 --S -->
<span v-html="showKeyWord(info.scenicSpotName)"></span> //scenicSpotName为数组展示的列表内容

showKeyWord(text) {
    const highlighStr = `<span style="color:#5a9dda; font-weight: bold;">${this.value}</span>`;
    const reg = new RegExp(this.value, "gi");
    return text.replace(reg, highlighStr)
}

点击删除按钮删除全部历史记录

deleteHistory() {
    this.$dialog.confirm({
        message: '是否删除历史记录',
    })
        .then(() => {
            localStorage.removeItem('history')
            this.searchHistory = []
        })
        .catch(() => {
            // on cancel
        })
},

输入框内容变化时请求数据的防抖处理

inputChange(value) {
    // 定义延时器输入框的防抖处理
    this.showhistory = false
    this.type = 0;
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
        this.kw = value
        this.queryKeyword(this.kw);
    }, 700)
    if (this.showclose == true) return
    this.showclose = true;
},

点击关闭当前搜索历史列表的tag标签事件

// 点击关闭tag标签事件
close(index) {
   this.searchHistory.splice(index, 1)
},

输入框点击搜索按钮事件，对搜索历史进行本地缓存

searchInputButton() {
    this.showclose = true;
    this.showhistory = false;
    this.type = 1
    this.queryKeyword(this.value);
    if (this.value == "") {
        this.value = this.placeholder
        return
    }
    let val = this.value
    if (this.searchHistory.indexOf(val) == -1) {
        // searchHistory存储历史数据的数组
        this.searchHistory.unshift(this.value)
        // 页面只允许展示10条数据
        this.searchHistory = this.searchHistory.slice(0, 10)
        // 进行本地存储
        localStorage.setItem('history', JSON.stringify(this.searchHistory))
    }
},

mounted() {
    if (JSON.parse(localStorage.getItem('history'))) {
        this.searchHistory = JSON.parse(localStorage.getItem('history'))
    }
},