vue移动端搜索关键词高亮

注意：数据是模拟的,搜索框我用的vant组件,你可以改成input输入框或者下载vant包，导入vant中的Search和Toast组件。（代码直接复制到vue文件中）

<template>

<div>

<h1>移动端搜索</h1>

<div class="search">

<van-search

v-model="value"

show-action

:clearable="false"

placeholder="请输入搜索关键词"

@search="onSearch"

@input="onInput"

>

<template #action>

<div @click="onSearch">搜索</div>

</template>

</van-search>

<div>

<ul>

<template v-if="dataList.length > 0">

<li v-for="(item, index) in dataList" :key="index" v-html="item" />

</template>

<template v-else-if="show && dataList.length == 0">

<li>暂无数据</li>

</template>

<template v-else-if="!show">

<li v-for="(item, index) in data" :key="index">名字：{{ item.name }} 年龄：{{ item.age }}</li>

</template>

</ul>

</div>

</div>

</div>

</template>

<script>

import Vue from 'vue'

import { Search, Toast } from 'vant'

Vue.use(Search).use(Toast)

export default {

data() {

return {

value: '',

dataList: [],

show: false,

data: [

{

name: '小红',

age: '23'

}, {

name: '小名',

age: '21'

}, {

name: '小黑',

age: '20'

}, {

name: '黑蛋',

age: '22'

}, {

name: '小天',

age: '19'

}

]

}

},

mounted() {},

created() {},

methods: {

onSearch(val) {

this.dataList = []

// 匹配关键字正则

const replaceReg = new RegExp(val, 'g')

// 高亮替换v-html值

const replaceString = `<span style="color:red">${val}</span>`

this.data.forEach((item, index) => {

if (item.name.includes(val)) {

// this.dataList.push(item.name.replace(replaceReg, replaceString))

// 需要的格式： '名字：小<span style="color:red">红</span> 年龄：21'

this.dataList.push('名字：' + item.name.replace(replaceReg, replaceString) + '<span style="margin-left: 15px;">年龄：</span>' + item.age)

} else if (item.age.includes(val)) {

this.dataList.push('名字：' + item.name + '<span style="margin-left: 15px;">年龄：</span>' + item.age.replace(replaceReg, replaceString))

}

})

console.log(this.dataList)

},

onInput() {

if (this.value) {

this.onSearch(this.value)

this.show = true

} else {

this.show = false

this.dataList = []

}

}

}

}

</script>

<style lang="scss" scoped>

.search {

padding: 30px 0px;

flex-direction: column;

align-content: flex-start;

max-width: 400px;

height: 70vh;

border: 1px solid #000;

margin: auto;

display: flex;

ul {

margin-left: 35px;

li {

list-style-type: none;

font-size: 14px;

line-height: 25px;

color: #787373;

}

}

}

::v-deep {

.van-search {

display: flex;

height: 25px;

display: flex;

justify-content: center;

input::-webkit-input-placeholder{

font-size: 12px;

}

.van-field__body {

input {

padding: 2px;

box-sizing: border-box;

}

}

:focus-visible {

outline: none;

}

.van-search__action {

border: 1px solid;

padding: 2px;

box-sizing: border-box;

margin-left: 15px;

background: #f7f7f7;

cursor: pointer

}

}

}

</style>