1. 搜索框为空默认展示下面的搜索历史，隐藏搜索列表
2. 如果用户输入搜索内容：
   有搜索结果展示：搜索结果
   没有搜索结果展示：暂无搜索内容
3. 点击搜索列表的选项，自動填充到搜索框

接着上次的分享之后这两天在項目中又Get一个新技能，在前端搜索框实现检索功能之前检索查询在项目中常规的写法是通过把用户输入的值传到后台接收，然后通过持玖层连接数据库根据SQL语句模糊查询，然后回值给前端页面这次给大家分享一下不用通过后台直接在前台实现检索查询。

当用户在输入框输入条件语句查询时oninput事件触发：

根据前端页面style.display = displayStyle;一个样式的属性，可以把值隐藏起来这样就实现了我们所说的，自动检索

最终效果是这样的： 

1、写一个方法过滤每一组字符串需要高亮的加高亮的class

3、通过v-html将返回作为HTML标签解析后输出

第一个参数是待搜索的字符串，第二个参数是要高亮的字符串 

css中加一个高亮样式：

 在页面上这样使用：

如果您觉得这篇文章帮助到了您可以留下您的评论或者捐赠支持一下。

一分两分也是爱给點鼓励也不赖 。