实际应用:数组的filter方法实现过滤数据

。。。

实现目标:通过关键字来搜索数据

这里就需要用到indexOf()方法了

以上代码的意思就是用services.typeName属性调用一下indexOf()方法,然后方法里放了一个sName属性(sName就是绑定在输入框的属性)indexOf方法本质是实现下标查询,例如sName的值为o,而services.typeName的值为Tom 那么结果就等一1,因为Tom字符串里面o字母的下标为1。这里就可以利用这个性质,如果下标的值不等于-1(-1就是没有),那么就说明输入的sName在services.typeName中存在,那么就返回过滤之后的数据,也就是services.typeName属性中都有sName的值的数组元素。简单一点来说就是,输入了一个o,就会过滤出services.typeName的值中有o的元素。这样就达到了通过关键字搜索的目的

实际操作的时候遇到一个问题,页面原本渲染的时候,用的就是遍历services数组,而我们过滤之后赋给的还是services数组,所以就会导致用户在搜索的时候不能实现二次搜索,就比如第一次搜索把名字里有车的元素留下了,第二次搜索的数组就会是第一次过滤之后的数组。

想了想发现可以通过第三个数组来达到可重复搜索原数组的目的


这里创建一个新数组,然后遍历这个新数组来渲染页面,这样就可以保证每次搜索的原数组都是services,

但是又出现一个问题,因为页面初始化的时候,预期的是显示全部数据,而我们现在遍历的是newservices数组,在一开始没有搜索的时候,这个数组是空的。

所以只需要在调用接口的时候,把从后台拿过来的数据再赋值给newservices数组一次就解决了

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容