最近项目当中遇到一个需求要求实现输入的内容，如果接口返回的结果有关键字，则输入的关键字高亮展示；实现出来感觉还是蛮简单的一个功能点，现记录下来分享给需要的同学。
1:监听输入框：比较好的做法是对输入事件做防抖处理，作防抖的好处这里就不做阐述了，不理解的同学可以自行百度学习。因为搜索内容还要实时和后台接口交互，输入字母或者汉字都要请求接口，返回数据会给到前端，这时候我们需要根据后台返回的内容作字符处理。
比如返回的是：arrList:[{arr:"融新科技A座"，address:"北京市朝阳区融新科技大厦A座"}，{arr:"B座融新科技"，address:"北京市朝阳区融新科技大厦B座"}，{arr:"C座融"，address:"北京市朝阳区融新科技大厦B座"}]；
则我们处理字符就好：核心就是使用string的一个split方法
先map或者for循环后台返回的数组，遍历里面的对象，将arr字符串变为数组格式；
arr.split('输入框输入的关键字')
比如我输入的关键字是：融，则分割结果分别是：['','新科技A座']，['B座','新科技']，['C座','']
总结就是如果关键字在字符第一位，则数组【0】是空，如果关键字是字符最后一个则数组【length-1】为空，中间的话就分割出来，这样就根据关键字将字符串重新分组
2:将处理好的数组重新组合放到页面上展示出来：
外层写一个for循环去遍历这个arr
arr[0]?arr[0]:''+arr[i]+i===arr.length-1?'':'输入的关键字'
样式就不在这里单独写了，根据自己ui展示去写就好了
网友评论