在实际的业务中，应该是文本框输入搜索的时候，触发实际添加。
输入内容—》展示搜索结果—-》点击搜索的数据—-在搜索记录里面添加一条数据。
image.png

实现搜索结果

先把button去掉
image.png
搜索结果在这个元素的下方
image.png

image.png
需要一个字段来标识，当前是搜索记录还是搜索结果。默认为true 默认页面进来是搜索记录。
image.png

image.png
image.png

制作结果页面

首先我们把值改成false
image.png
这样显示的就是搜索结果。
image.png
搜索结果和首页的卡片内容其实是一样的。我们直接把首页的卡片内容拿过来就可以了。这里我们使用一个滚动的组件。
image.png
其实整体的写法和lsit-item内容很显示。我们直接把这块代码复制过来。
image.png
复制过来，加一个v-else
image.png
loadMore就去掉不要了。
image.png
下面的内容删掉。
image.png
处理list数据绑定。这里的getList方法都复制过来、
image.png
复制过来后，删除一些我们不用的
image.png
这三个孩子改了
image.png
image.png
定义searchLsit来定义返回的数据。
image.png
定义searchList 初始值是一个空的数组。
image.png
循环的就是searchList
image.png
在onLoad里面调用这个方法
image.png
这相当于是我们搜索后的结果
image.png
页面可以正常的去滚动
image.png

处理搜索逻辑

change的时候调用getList，并把改变的值传过来查询。

image.png
把接收的值传给云函数
image.png
默认先来模拟一下，查询所有
image.png

image.png
输入test，每一次的输入都会触发查询的请求。这样我们的请求太频繁。
image.png
所以我们需要限制我们的输入，让它每隔500毫秒或者是1秒去请求数据。其他的时间，等待我们的输入。
this.mark并不会在页面内渲染，所以不需要在data中声明。mark最初是undefined因为最初并没有这个变量。
image.png
image.png
1秒后执行搜索。
image.png
1秒后再把mark设置为false。这样就可以限制我们的请求次数了。
image.png
加个叹号，取反
image.png
输入1秒后才刷新
image.png
设置100%的宽度
image.png

image.png

处理实际的请求数据

image.png
image.png
复制get_list的全部代码，
image.png
修改下。分页的删掉，这里我们不需要分页。
image.png
需要传入一个value
image.png
image.png

image.png

image.png
match筛选数据。接收一个正则。
image.png
上传部署
image.png
image.png
image.png
image.png
函数名改成getSearch
image.png

image.png
image.png

image.png
image.png
输入一个node关键字
image.png
搜索前端
image.png
把搜索的内容删除掉了 。但是刚才搜索出来的内容还在
image.png
如果value为空，直接返回
image.png
首先清理下控制器
image.png
然后清理mark设置为false，再调用getSearch。这样哪怕是空的也回去搜索。
image.png
清空了搜索内容，查询的是所有的数据
image.png
value为空，那么就设置searchList为空数组。
image.png
image.png
默认设置为true
image.png
默认进来
image.png
搜索node 没有变化
image.png
正常搜索，把is_history设置为false
image.png

image.png
搜索内容清空
image.png

结束