搜索功能的实现

您所在的位置：网站首页 › 微信小程序搜索框的实现和详解 › 搜索功能的实现

搜索功能的实现

2024-07-15 16:36| 来源: 网络整理| 查看: 265

一、搜索功能的需求描述：

数据：教师名字列表的数组

1、搜索文本为空时，展示所有教师列表

2、输入搜索文本，展示与搜索文本匹配的教师列表

二、搜索功能的算法描述：

1、声明一个数组存放搜索结果，

2、判断搜索文本是否为空，为空则直接设置结果数组赋值为全部教师列表的数组

3、若搜索文本不为空，先将搜索结果数组设置为空数组，

遍历教师列表数组，利用indexOf函数判断每一个教师名字与搜索文本是否匹配，匹配则将该教师push进搜索结果数组

三、相关js代码： inputText: function(e) { this.setData({ text: e.detail.value.replace(/\s+/g, '') }) let text = this.data.text; let showList = this.data.showList;//showList为教师列表 if (text == null || text.trim() == '') { this.setData({ 'resultList': showList }) return; } let tempResultList = []; for (var i = 0; i < showList.length; i++) { if (showList[i].name_phone.indexOf(text) >= 0) { //如果老师列表中有匹配的 let ifHas = false; //用于记录temp结果列表中是否有这条数据 for (var j = 0; j < tempResultList.length; j++) { if (tempResultList[j] == showList[i]) { ifHas = true; //如果temp结果列表中有这条数据，改ifHas的值为true break; } } if (!ifHas) { //如果ifHas为false,即temp结果列表中没有这条数据，则把这条数据放入temp结果列表 tempResultList.push(showList[i]); } } } this.setData({ 'resultList': tempResultList }) },

【本文地址】

搜索功能的实现

搜索功能的实现

今日新闻

推荐新闻