移动端项目搜索智能提示总结

悠悠 2023-10-04 16:19 264阅读 0赞

![2021061223504464.gif][]

#### 1.总体认知： ####

> 搭结构，先做基本的UI，再做功能。能复用的就封装，复杂功能拆分成一个个分子组件

#### 2 我要实现的效果是： ####

> 提供搜索的入口，实现搜索功能。在用户搜索时提供智能提示，并保存用户的搜索记录

#### 3 大体： ####

> 第一步，创建单独的页面，进行组件布局，配置路由跳转。  
> 第二步，功能：实现联想建议功能《监听输入的变化--请求接口，拿数据--页面渲染》  
> 第三步，功能：高亮展示搜索关键字《利用正则及replace方法做字符串替换--计算属性--页面渲染--map函数--v-html》  
> 第四步，功能：显示搜索历史 **保存记录的格式和位置【数组** **】**  
> 第五步，添加搜索记录  
> 第六步，删除历史记录  
> 第七步，优化--节流防抖及bug处理

#### 4具体实现过程涉及到的技术点 ####

> 1.在组件中，实现点击跳转，可利用编程式跳转：@click= $router.push('/search')  
> 2. git log 退不出去 出入Q即可  
> 3.联想建议功能--vant提供了一个input事件可以实时监测输入的值定义为keyword--掉接口（keyword是一个参数传入接口），存数据，渲染页面  
> 4.功能高亮展示搜索关键字：1.如何高亮？--关键字替换  
> 2.对谁做替换？--理论都可以--但是为了不改变原数组，搞一个副本  
> 3.利用计算属性保存高亮处理之后的建议项--正则+replace  
> 4.用v-html显示数据  
> 注意：正则replace替换，只能替换一个  
> 高亮总结：首先封装一个正则替换放法，可以替换一个。然后再利用map函数，map函数的特点就是会对每一项都执行一遍函数，所以就可以吧数组所有的数据都替换，然后渲染的时候，得用v-html，不然标签不会渲染。  
> 显示搜索历史总结：优化-不能有重复项-封张方法+利用findindex

> 状态不佳，回头填坑吧。这个功能的实现无非是 输入文字的时候，掉接口不断智能提示，并且保存输入历史记录，再加一个点击跳转，和点击其他按钮跳转，先把要干什么，要存什么数据，要渲染什么数据理清楚。………………

#### 5：重要知识点介绍： ####

#### 5.1防抖和节流==》简单写法===》进阶写法==》源码了解 ####

#### 5.2页面跳转传参 ####

#### 5.3**高亮** \-- 字符串替换 str.replace(正则，回调) ####

#### 5.4计算属性 ####

#### 5.5持久化（复习） ####

#### 5.6漂亮的代码 ####

*  !!xxxx
 *  abc && f()
 *  findIndex(item => item === keyword)

[2021061223504464.gif]: https://img-blog.csdnimg.cn/2021061223504464.gif