element输入框(自动补全)远程搜索下拉菜单匹配字体颜色修改

最近有一个需求：上边要求当用户使用远程搜索输入框时，在输入框中输入文字回车后，如果远程搜索查到了用户输入的文字，会出现一个下拉菜单匹配文字，例如用户输入三全，下拉列表出现三全食品，那么三全俩字颜色就需要变红，简述一下我的实现思路：

我是重新封装的el-autocomplete组件，在packages/autocomplete/src/autocomplete中找到<li>标签里的<slot :item="item">{{item[valuekey]}}</slot> 将其替换成我们自定义的模板

<div v-html="hightlightem(item.value,value)"></div>

，然后在methods中添加上述自定义方法

heightlightem(text,query){
    const regex = new RegExp('(' + query + ')',gi)
    return text.replace(regex,'<span style="color:red">$1</span>')
}

在这个方法中，首先通过正则捕捉到用户输入的文字，gi 修饰符用于在目标字符串中查找所有不区分大小写的匹配项，$1用于在替换操作中引用括号捕获的子字符串，这样就可以实现了。

效果图：