大家可能在很多网站的搜索栏看到这样一个功能：输入一个关键词，在下面会出现一个联想的关键词列表，我们可以从列表中选择关键词进行搜索。这个功能在电商网站尤其多见，常用电商网站的朋友应该都不陌生。
最近刚好有做电商产品的小伙伴询问这个功能的交互应该怎么做，那么我们就针对这个交互一起来看看。先看一下这个功能具体的效果是怎样的。
这里也有预览地址https://aurpk5.axshare.com，想自己动手试试效果如何的小伙伴，可以自己操作一下。
好了，看到效果之后，话不多说，我们直接来看看怎么做。先说一下之前有位小伙伴的想法，是通过动态面板，不同的关键词用不同的状态也制作。这个想法是没错的，但有一点麻烦。就是在编辑状态切换的条件是比较麻烦，不知道用户输入的是否是我们设定的条件。打个比方，关于手机的条件，如果我们设定的是“手机”二字，用户假设输入“华为”、“手”、“小米”等其他词语，那么就不能切换到我们想要的状态。如果要用这种方法的话，条件需要设置非常多，繁琐。
这里说一个简单一点的方法，可能有人已经想到了，没错，就是利用中继器，原理就是将所有的联想词都用中继器做好，然后根据关键词进行筛选。上面提到的问题，如果简单这样做客也是存在，但只要借助一个函数就可以轻松解决，我们稍后讲。
首先我们先把部件元素都建好：
元素比较简单，重点在交互设置。设置交互我们要考虑的是，怎么样实现，根据输入的任意内容去对我们中继器里面的内容做筛选。
这里先给大家说一个函数，等一下我们会用到，可以提升搜索的质量。这个函数就是index of函数。这个函数是返回某个指定的字符串值在字符串中首次出现的位置，返回0代表第一个位置，返回-1代表没有搜索到该字符。根据这个返回值，我们可以知道，当返回的值大于-1时，指定字符在字符串中一定能搜索到，所在位置不重要。也就是说，我们输入的关键词只要用这个函数，在中继器的数据中搜索，它的返回值只要大于-1，我们就把包含了这个关键词的内容筛选出来。
好，假设我输入的关键词是“苹”，就把带“苹”字的内容筛选出来了
这里边最主要的就是index of函数在中继器筛选中的应用，关键是理解返回值的意义，难度不大。在这个案例里边，其他的设置大家有兴趣可以在空余时间把它完善一下。比如，清空搜索框内容，联想列表消失；选择列表中的内容，会将内容获取到搜索框等等，这些相对比较简单，这里就不在赘述了。
网友评论