最近项目当中遇到一个需求要求实现输入的内容,如果接口返回的结果有关键字,则输入的关键字高亮展示;实现出来感觉还是蛮简单的一个功能点,现记录下来分享给需要的同学。
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展示去写就好了