标签:微信 程序 value db 点击 搜索 Day12 我们 输入
回顾:前面完成的是对搜索框的布局,点击输入和没点击输入的不同显示,以及历史记录的通过storage保存,还有历史记录的清空
下面来搞,我们怎么样进行搜索!在search.js中定义一个searchList来保存搜索的结果,这个数组里面包含的就是我们搜索到的用户名 头像 还有id
我们是吧 用户 按了 回车 之后,把用户输入的东西拿去查找
在查找数据库 后面的 where设置的话,不能直接和数据库里面的nickName 进行比较的,因为如果我叫“大黄狗”,这样的话,只有用户输入了大黄狗,才可以找到我的,但是正常的试如果我输入了 “大”字的话,应该也要跳出我的信息的
所以在实现这种模糊的匹配的时候,一般都是用正则来实现的
在微信开发文档中 云开发-》https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html
demo:
// 数据库正则对象 db.collection('todos').where({ description: db.RegExp({ regexp: 'miniprogram', options: 'i', }) })
我们就是通过在搜索框中输入的信息,得到之后,就给下面这个函数传入value,然后在数据库中通过正则表达式,来获取到符合的数据了
changeSearchList(value){ db.collection('users').where({ nickName: db.RegExp({ regexp: value , options: 'i', }) }).field({ userPhoto : true, nickName : true }).get().then((res)=>{ this.setData({ searchList : res.data }); }); }
但是仅仅是通过这个函数的话,我输入了我的名字中的一个字 ”喵“,结果就没有显示出来,我们可以通过console.log来测试一下的
确实是反馈了我的信息,但是在前端的查询到的列表中没有显示出来的
如果还是不知道哪里错的话,可以这样测试:
可以看到,这个确实是没把id传过来,所以这里显示的是 undefined的
就发现了,我们前端写错了,少了等号,并且 因为是用for遍历的,所以我们要用item才行的
改为:
<navigator wx:for="{{ searchList }}" wx:key="{{ index }}" url="{{ '/pages/detail/detail?userId+' + item._id }}" open-type="navigate"> <view class="searchList-item"> <view> <image src="{{ item.userPhoto}}" /> <text>{{ item.nickName }}</text> </view> <text class="iconfont iconyoujiantou"></text> </view> </navigator>
得到的效果就是:
点击进去,也是可以看到我的详情页面的
我们把测试号 改名为 ”喵喵二号“,如何测试一下,能不能把多条个人信息显示出来
可以看到显示的是正常的
还有一个功能就是,我们点击了 搜索历史的话,还是可以进行搜索的
<text bindtap="handleHistoryItemDel" wx:for="{{ historyList }}" wx:key="{{ index }}">{{ item }}</text>
通过对每一个历史记录得text,添加一个点击事件
handleHistoryItemDel(ev){ console.log(ev); }
得到的结果中,我们查询看看有没有 喵喵 的字样
但是我们没有看到又中文的字样,这个时候我们就要自定义属性了
就把历史记录的text变成这样了:
<text bindtap="handleHistoryItemDel" data-text="{{ item }}" wx:for="{{ historyList }}" wx:key="{{ index }}">{{ item }}</text>
然后我们通过方法:
handleHistoryItemDel(ev){ let value = ev.target.dataset.text; console.log(value); }
然后我们可以看到打印出来的结果:
,所以我们在js里面就拿到了这个,然后就是直接用这个拿到的东西用搜索功能即可了,就可以直接在下面显示出我们的搜索列表了
点击了”喵喵"之后下面就自动的显示出来我们的搜索列表了
扩展:因为这是一个组件,所以复用性很强。我们可以在“附近”中添加上 搜索框的
只需要 在JSON文件里面引入组件,然后就可以直接在wxml中使用这个标签了
标签:微信,程序,value,db,点击,搜索,Day12,我们,输入 来源: https://www.cnblogs.com/SCAU-gogocj/p/13194794.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。