00:00
好的,我们继续啊,那上节课呢,我们把这个历史这一块啊,我们给它静态页面搭建完了,那这节课呢,我们真正去实现这个搜索历史这个记录的功能啊,那么什么时候我们要添加一条搜索历史记录呢,那就应该是。用户输入完内容,并且发了请求,真正说你比如我搜到一个页面以后,我们可以把这个关键字呢,放到我们的搜索历史记录里面,对吧?啊,那这样的话呢。来到我们的代码啊,找到我们的GS。啊,对应的样式我先关了。好的,GS里面呢,我们在这里是不是发请求。去关键字模糊匹配啊,然后这是拿数据,那么拿到数据以后呢,我们可以干一件什么事情呢?将这个呃,搜索的关键字对吧?啊添加到这个啊浏览呃,或者叫搜索历史记录中。对吧,啊,历史记录中吧,嗯,好的,那接下来我们要分享我们搜索历史记录最终是不是有可能有多条。
01:08
有可能有多条。对吧,那这样的话。最终应该是用一个数组去盛放它,对吧?应该用一个数组去乘放它好的,那怎么用一个数组去存放它呢?这个时候我们可以先去初始化一个数据,这我就叫他一个history list啊,对应的是一个数组,嗯,我们还是初始化一个啊,那这个呢,是啊搜索啊,历史记录呗,好的,那初始化的数组有了,哎,接下来我们做一件什么事情呢?首先啊,我从这个data中呢,去把它拿出来,那么因为要从data中拿,大家看上面这我是不是拿过一个search content呀,那这样的话,为了方便的话呢,我这样去做。
02:00
哎,Let,它等于z.data那我去从data中呢,把这个search content我们结构出来,同时呢,我们把这个黑list解构出来,对吧?那有了这个数组我们可以干嘛呢?啊,我们可以去把这个搜索历史经络呢添加进去,而且呢,每次搜索的话呢,我们应该是放到前边对吧?因为你最新搜索的应该排序排到前面,所以我用什么r shift去添加。添加时呢,其实就是要添加的search content。对吧,那么加到这儿以后还不够,那我们首先要做的是把这个更新到data中啊,从到这儿啊,就hit瑞。就这个呗,嗯,放进去啊来,那这个时候呢,我们先来看,来到我们的AB这报了一个错啊,说什么token啊,这我们没有写完。Search content啊,在这里我们是不是也得给到人家呀,来,那这个时候再来看一下啊,Data中content默认为空啊,我是为。
03:09
嗯,这里面是不是有A啊,没有问题啊,来我输个B。嗯,稍等啊,他这应该是发起球没有成功的,我们看network。嗯。啊,这还在三三百毫秒以内是吧,来我们呃,现在出个B啊,等一会儿你看这不就发请球了吗?来在这里是不是又多多加了一个B,而且呢,它是不是加到前面去了,嗯,没有问题,好的,那这样的话呢,这有这个搜索历史记录,嗯,还不够还不够,那我们在这儿如果是添加了搜索历史记录啊,那假如说用户一刷新。嗯,用户一刷新我们的项目,那接下来这是不是应该显示那个历史记录呀,一刷新的话呢,初始化的数据都没了呀。对吧,所以呢,我们可以将这个从到哪,从到我们的本地啊,从到本地易刷新再读出来。
04:06
嗯,好的,那其实啊,贝塔中这要不要都行。哎,要不要东行这呢是为了给大家演示的啊,我们最终呢,应该是让要存到本地啊,所以呢,Set一个啊storage,嗯,我们这来一个think吧,同步这里呢,我们要从的呢,就是我们的history啊,叫search吧,啊history好的,那么接下来要从的是不是应该就是这个数组呀。嗯,就这个数组呗,哎,存到本地的目的是为了下次onnold进来的时候,我们是不是要读取本地这个搜索历史记录,所以呢,这我们来一个啊,那这个呢,是获取本地啊历史记录的,嗯,功能函数,来,我们来一个get这个search history吧。嗯,分装了一个方法,那么在这里呢,啊,微信点get一个story,对吧,来一个think,嗯,啊要读的呢,就是这个,哎,Search history。
05:12
对吧,啊没有问题,那么读到了以后呢,我们这接收一下let一个这个history,嗯,List等于它对吧,那这哥们不一定有值吧,假如说用户没有搜索过,那么本地应该没有啊,所以呢啊,我们可以干嘛呢?可以在这儿去判断一下,如果这哥们为触。说明是不是有值有值了,我们要干嘛,我们要将它呢,更新到我们的这个啊贝塔中,因为用于去写式嘛,那现在呢才能看到啊这哥们它还是有用的,因为我们要显示到页面上没有问题,好的,那这样的话啊,我们来看一眼,呃,上来我们的本地没有啊,那我输一个A。
06:02
这是不是有一个A啊,那这个时候呢,注意啊,我刷新一下页面啊,重新加载应用啊,我们看一下我们的历史记录里面有没有啊,那现在没有没有是因为什么没有,因为我们这个方法还没有调用过来啊在这里啊来嗯,这呢是啊,获取这个历史记录呗,嗯,Z点它一调用就好了,来那重新加载我们应用,我们看一下。嗯,这有个报错啊,呃,说什么微信点啊。刚才我们写了什么微信点是不是这呢?应该是什么Z点吧,好的来再看啊。来到abp贝塔中,嗯,那上来是不是就有值了,没有问题,那么有值了以后呢,我们就可以给它循环BA列出来显示到页面上。那这样的话呢,历史记录这啊这我们可以用这个微信for。
07:03
对吧,我们去便利谁呀,便利这个啊search啊history对吧?啊,其实对应的微信key呢啊,我们也可以用什么用这哥们。他搜索历史记录的本身吗?那就是它的个体,那每一次我们要保证我们里面存的每一次,每一次存的数据。之前应该是没有的,如果有,我们还要不要往里边再添加一条新的浏览历史记录啊,新的搜索历史记录。其实不需要,而且你需要,如果你添加的话,就好像我写好这样,大家看这有两个A,那就没必要了,对的吧,那包括如果是两个A的话,那我们这的K它就不是唯一值了,能不能懂啊,那这个呢,待会我们处理一下啊,那接下来我们下面显示的是不是应该就是HM本身。先来到我们的下面,我们看一下。
08:03
啊,上来这,嗯,没有问题啊,这有一个A啊,那现在的A好像没有显示出来啊来啊,Search history,我们看一下是不是这个。我们叫什么呀?叫hit list吧,啊,没问题啊,那这个数字我们写错了啊,来过来。看一眼,诶,这有A没有问题,那刚才我们说了,如果是两次搜索的内容一致的话,我们是不需要添加一条新的浏览历史记录的,对不对。那怎么做?那我们当初在往这个数组里边添加的时候,我们是不是应该要考虑一下这个数组里边之前有没有。我们即将要添加的这个内容。对的吧。哎,有没有。所以呢,我们可以直接或者说你用什么index of去判断一下。
09:05
嗯,搜索内容吧,如果有返回下标,如果没有是不是负一呀。什么时候我们要往进添加呢,那就说如果。哎,这哥们我用index of呢,检测它的下标等等于负一,说明之前是不是没有,那我们就push进去。对的吧。一旦有我们要干嘛啊,其实我们不做任何处理。都可以。我们不做任何处理都可以,但其实咱们真正要做的好一点的话,假设我原来的数组里边。嗯,是这样的啊,有BCD3个搜索历史记录,那么当用户再次搜索C的时候,原来有我们是不是不需要添加了,但其实最终要给人家展示的时呢?C是不是应该靠前去排,那也就是最终应该是CBD,那我们怎么做?
10:15
比较简单一种方式是我们先把这个时候删掉,然后把c shift到前面就好了。对吧,那这样的话呢,来到else这儿呢,来我们做一下啊,首先如果说有我们要去删删谁呢。删这个下边的内容。对吧,删几个删一个,那么删完了以后。这是不还得?去干嘛,还得去push呀,啊and shift呀,那这样的话这个代码就有点重了,那干脆我们这样去做。干脆我们这样去做,那这就不不判断它是否等等于负一了,我们直接判断它不等等于负一,那说明啥?
11:00
说明这些有,那我们先给它删掉对吧,然后删掉以后啊,那我们这else都不用写了,反正最后我们是不是肯定要去UN shift一下。对了,不好的,那这样的话呢,我们来看一眼。啊,那现在呢,本地有个数字是A对不对,我输个B。好,发起球了,大家看有个B对不对,那我删掉啊,我我接下来测试啊,我再输个A的话应该长什么样。A,是吧,应该要跑到。B的前边。你想想看是不是?走。嗯,A跑到B的前面了,那这样的话呢,啊,我们刷新一下,最后这显示出来的应该历史记录前面第一个还是A好的没有问题啊,那这是这个。然后啊,还有一点,比如说用户输了个CCC。那么用户输了个CCCC啊,大家看着,那我们这儿应该有一个叉号对不对。
12:05
点击叉号,我们应该清空这儿的内容,同时是不是要把这个CCC呢,我们要显示到页面上,显示到那个历史记录里面啊,那我们继续啊,那这个时候呢,我们来到结构里面。在input这儿来,我们再去加一个。啊元素啊,那这个呢,我就用大写的叉表示吧,就清空呗,来呃,Class我们就叫它一个clear啊清空,那么对应的我们应该去写一下人家的样式。对吧?在哪呢?在这个search input的旁边去写就OK了。嗯,没有问题来,那这哥们呢,始终呢,应该去到右侧对不对,所以呢,我们这儿呢,可以来一个f absolute,让它呢去相对于我们的search input呢去干嘛?哎,去定位一下。
13:06
哎,这一点应该能懂,哎在右侧啊,在右侧同时来,那我们写一下吧,右侧比如说我们来个30。RPS啊,Top呢,我们让它为零啊,然后我们设一下它的字体大小,比如说我们来个30吧,嗯,没问题,我们看一下效果。是不是在这儿呢?好的,那到时候啊,我们点击这个叉号,是不是要清空表单上的内容。那这个时候来找到我们对应的这个。哎,清空是不是在这呢,保定点击视线啊,By the tap呗,这呢是clear这个search清空搜索内容。这少个C是吧,来那么对应的啊事件我们定义一下。嗯,那这个呢是清空啊,搜索内容要清空的话很简单,那么搜索的内容首先我们要做两件事情啊,第一件事情我们搜索的内容呢,是不会放到。
14:16
我们的AB也放到我们当前页面的data塔中,对了,不,这第一步,那么我们首先是不是要把这清空,这清空还不够啊,你是不是还得把这个表单项的内容。显示这也清空呀。那如何去控制这样的元素呢?啊,那就要说啊,表单项现在啊,我们不能直接操作到,所以呢,我们可以这样去做这个value,我们让他呢,跟这个我们收集的这个数据search content关联起来。嗯,关联起来啊,那现在是什么?我们表单箱的数据一变,我们把收集的内容是不是同步到我们的贝塔中,同时反向的是不是再给到它的value,这没有问题吧。
15:06
啊,那这样的话,我们只需要控制一下search counter是不是就可以了。对的不好的,那来对应的GS里面我们去写一写,我们比较简单,Z点三一个data塔,我们只需要把这个什么呀,啊search,嗯,Content置为空就可以了。为了证明这哥们执行了,我这儿呢,打印个clear,我们看一眼过来。好的,大家看我这输入内容。我一点叉号,你会发现并没有清掉。那这是为什么呢?我们来到打印这,看一眼那个科尔,它并没有执行。对吧,那现在这的打印呢,是48行,我们找一下48行是哪呢?是这啊这个我们就关掉了,嗯,为什么没有执行呢。
16:02
你想想看,刚才我们用了一个什么,用了一个定位啊,注意这儿呢,是因为层级的问题,我们需要呢,手动给它把层级提高一下,否则的话你跟你看着像点击这个叉号,其实你点的是表单项。点的是表达项来这个时候我们再来看啊,我一点这个叉号走,大家看是不是清空了没有问题。嗯,对的吧,那这边清空了,你看下边这的列表还在啊,我们要干嘛。清空的这个不够,我们还应该把那个当初的那个search list数组是不置为空。对吧,还应该干嘛呢,我们是不还应该。再去把历史记录显示出来,我们看一眼啊,那现在这历史记录比较多啊,看着我输一个bbb。内容出来了对吧,我一点击走。
17:00
好,该清空的清空了,可是大家看bbb这个B没有出来,那这是为什么呢?你先来看我的story bbb。这有吗?并没有添加进来啊,那现在啊,看一眼走这的请求发了,这是不是有了没有问题,那这个时候我们看一下啊,刚才应该是。他没有帮我加进来啊,应该是没有发请求,那现在发请求了走。我点个叉号。大法,现在这是不是有没问题,我换一个CCC多一点。这是没有,我把它拆掉。有了吗?嗯,没有问题,那这样的历史记录是不是就能够显示出来了啊,没有问题啊,好的,那这样的话呢,这个历史记录跟这儿的本地是不是也关联上了,那你看呢,当我们这儿的内容以清空。
18:03
嗯,那么把对应的元素关掉以后,你要注意。那这边的内容。我们都不要了,不要它以后呢,页面上呢,任何的内容都没有了,而历史记录这个东西是不是会自动的去本地这儿读,你看一下我们历史记录啊,我们是在哪读的。咱们是不是在这儿呀啊。对吧,在anold里面,我们通过这个方法呢,去读了一下历史记录啊,那现在哎,有一点不对劲啊,大家看着我把这个历史记录啊。这样吧,我把历史记录呢给大家清空一下,那怎么去清空这个历史记录呢?哎,怎么清空这个历史记录呢?我们正好把这个也写一下啊,把这个也写一下。对吧,那现在这个历史记录啊,或者这样吧,我们这儿先不写它啊,我们先不写它,现在的历史记录是不是有很多呀?啊,那这些不用管啊,那下面它,呃,下面这它有多少,这都没关系,我输个什么,我输个ddd。
19:17
嗯,这边这是不是加了个ddd。对的吧,啊,这儿没有问题了,我一点叉号这显示出来ddd啊,我们看一下,那这呢是哪帮我们显示这个,我感觉啊,他这不应该直接给我显示出来呀,因为我们获取这个历史记录。啊,对,我知道为什么显示出来了。获取历史记录是吧?在alllo这儿做了一遍,但是你别忘了我们页面要显示的history。是不是这个呀,啊,这个历史记录hit瑞呢,我们在哪,在我们当初发请求发完以后,我们是不是更新了一下,所以页面上能够及时显示出来啊,没有问题。
20:00
好了,那这样的话啊,把我们的历史记录。啊,跟这个叉号这我们就绑定完了,在这里大家要注意啊,我们考虑周全一点的话呢。那就是刚才啊,我们在哪呢?我们在这这个判断,我觉得这个嗯还是比较有意义的,那我们可以把这个叉掉啊,我给大家把画笔调出来。这里我们存到本地以后啊,往出在保存的是啊,就往本地历史记录在保存的时候你要注意。如果有我们就先把之前的删了,再往前边添一条新的,如果没有是不是相当于直接走下面添一条新的呀,哎,那这做完以后啊来,那这节课呢,我们讲到这啊,那关于删除浏览历史记录,下节课我们再做,我先把这个视频给大停。
我来说两句