vue3 搜索框 相关搜索内容 搜索词变色

html 

<!-- 搜索框 -->
<div class="input">
    <input type="text" v-model="search_content" @input="replace_text(search_content)"
        @focus="search_show = true, replace_text(search_content)" @blur="search_show = false"
        :placeholder="search_placeholder">
    <div class="icon"
        @click="navigateTo({ path: '/home/searchDetails/' + (search_content ? search_content : search_placeholder) })">
        <i class="iconfont icon-search" style="color:#fff;font-size:20px"></i>
    </div>
    <!-- 搜索列表 -->
    <div class="search_ul" v-if="search_show">
        <div class="li" v-for="item, i in search_list" :key="i">
            <p v-html="item"></p>
        </div>
    </div>
</div>

js

/**搜索内容*/
const search_content = ref("")
/**搜索框默认值 根据最近搜索推荐*/
const search_placeholder = ref("vue")
/**是否显示搜索列表*/
const search_show = ref(false)
/**搜索推荐渲染列表*/
const search_list: any = ref([])
/**历史搜索*/
const search_history: any = ref([])
/**模拟后端返回的数据*/
const search_data = ref([
    "搜索内容",
    "搜索内容vue",
    "搜索内容vue2",
    "搜索内容vue3",
    "搜索内容vue2和vue3",
    "搜索内容vue3和Nuxt3",
])
/**
 * 修改搜索内容的文字颜色
 * @text 搜索内容
 */
function replace_text(text: string) {
    console.log("搜索内容：", text);
    /**判断搜索内容不为空展示推荐搜索*/
    if (text.trim() != "") {
        search_list.value = []
        search_data.value.forEach((item: any) => {
            /**替换搜索内容为标签添加样式*/
            search_list.value.push(`${item.replaceAll(text, "<span style='color:#c4302c;font-size:16px'>" + text + "</span>")}`)
        })
    } else {
        /**判断搜索历史是否为空*/
        if (search_history.value.length != 0) {
            /**不为空显示历史搜索*/
            search_list.value = search_history.value
        } else {
            /**为空显示推荐搜索*/
            search_list.value = [
                "推荐搜索内容",
                "前端页面怎么写",
                "怎么让搜索的字变成红色",
                "字变成红色的css怎么写",
            ]
        }
    }
}

scss样式 

/**搜索框*/
/**定义主题颜色*/
$color: #c4302c;
.input {
    width: 234px;
    height: 32px;
    border: 2px solid $color;
    border-radius: 120px;
    position: relative;
    /**搜索列表*/
    .search_ul {
        position: absolute;
        left: 50%;
        bottom: -200px;
        transform: translateX(-50%);
        background-color: #fff;
        box-shadow: 0px 2px 20px 0px #EBEB
        width: 235px;
        height: 190px;
        overflow: hidden;
        border-radius: 10px;
        text-align: left;
        padding: 10px 0;
        .li {
            width: 100%;
            font-size: 16px;
            color: #909399;
            cursor: pointer;
            height: 30px;
            background-color: #fff;
            p {
                padding: 5px 10px;
                font-size: 16px;
                &:hover {
                    background-color: #f0f
                }
            }
        }
    }
    input {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        width: 70%;
        height: 90%;
        border: none;
        outline: none;
    }
    .icon {
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(1px, -50%);
        width: 44px;
        height: 30px;
        border-radius: 15px;
        background: $color;
        display: flex;
        justify-content: center;
        align-items: center;
    }

效果

搜索内容是写死的，搜索列表数据由后端返回，前端进行循环处理