去哪儿-12-city-search-logic

目标：城市列表页搜索区域的功能实现

功能：在搜索城市名字或者拼音的时候，能够把搜索的结果显示出来。

搜索列表的布局与逻辑实现

<template><div><div class="search"><input class="search-input" type="text" placeholder="请输入城市或字母"></div><div class="search-content"><ul><li>123</li></ul></div></div>
</template>

样式美化：

.search-contentoverflow hiddenposition absolutetop 1.58remleft 0right 0bottom 0z-index 1background green

要想在这个区域中显示搜索结果，就需要将用户的搜索词与和数据做一个双向绑定。data中设置一个keyword，默认为空字符串，使用vue中的v-model让input框的内容与这个keyword值做一个双向绑定。

<div class="search"><input v-model="keyword" class="search-input" type="text" placeholder="请输入城市或字母">
</div>

此外，City.vue需要向Search.vue传递cities数据:<city-search :cities="cities"></city-search>，Search.vue接收cities数据：

props: {cities: Object
}

Search.vue中在data里面定义一个list空数组，并设置一个watch侦听器来侦听keyword的值，同样的，为了提高性能，我们采用节流的方式：在data中初始化一个值为null的timer,即：

watch: {keyword () {if (this.timer) {clearTimeout(this.timer)}this.timer = setInterval(() => {}, 100);}
}

具体的逻辑实现：

this.timer = setInterval(() => {const result = []for (let i in this.cities) {this.cities[i].forEach((value) => {if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {result.push(value)}});}this.list = result
}, 100);

代码分析：
在cities中，每一项数据是这样的：

"A": [{"id": 56,"spell": "aba","name": "阿坝"}

循环遍历cities中的数据，判断用户搜索的中文关键词或者拼音是否在这个数据库当中，如果存在的话就把它们放在一个数组里面，最终将这个结果给到this.list用于渲染到页面上的搜索列表当中：

<div class="search-content"><ul><li class="search-item border-bottom" v-for="item of list" :key="item.id">{{item.name}}</li></ul>
</div>

至此，页面上的搜索功能就能实现了，接下来再做进一步的样式优化：

.search-itemline-height .62rempadding-left .2rembackground #fffcolor #666

此时会发现，当我们搜索一个城市的名字，比如果是“阿”开头的，就会显示出很多“阿”开头的城市名字，但是此时的页面无法滚动，超出页面的部分无法查看，我们借助better-scroll插件来实现页面的局部滚动功能(使用这个插件之前不要忘记引入)。

首先，在class="search-content"的div上添加一个ref属性，然后借助生命周期钩子:

mounted () {this.scroll = new Bscroll(this.$refs.search)
}

就可以实现搜索列表的局部滚动了。

但是此时会发现，当我在输入框中删除“阿”后，搜索列表还是显示在那里，所以需要进行一个小的优化。在侦听这个keyword的值的时候，判断当这个keyword不存在时候，就将这个list设置为一个空数组然后return就可以了。

当用户输入的数据在数据库中不存在的时候，搜索列表中没有内容，这时可以给用户一个"没有找到匹配数据"的提示:

<li class="search-item border-bottom">没有找到匹配数据</li>

但是会发现，这个提示语句在一开始搜索的时候以及搜索过程中都会显示，我们想要的效果是，当搜索列表中有数据的时候不显示提示信息，当匹配不到用户搜索的数据的时候才会显示出来。可以使用v-show来实现：

<li class="search-item border-bottom" v-show="!list.length">没有找到匹配数据</li>

上述的效果实现了，但是这个列表区域把之前写过的城市列表全部遮挡住了。这个搜索列表区域的显示语法可以通过一个变量来控制：

<div class="search-content" ref="search"v-show="keyword"
><ul><li class="search-item border-bottom" v-for="item of list" :key="item.id">{{item.name}}</li><li class="search-item border-bottom" v-show="!list.length">没有找到匹配数据</li></ul>
</div>

这就表示，当keyword有值的时候就会显示，没有值的时候就会隐藏。

代码小优化

<li class="search-item border-bottom" v-show="!list.length">没有找到匹配数据</li>

在上面的代码中，v-show指令中有一个取反的运算符!, 我们应该避免在模板当中出现逻辑性的描述。所以，可以定义一个计算属性：

hasNoData () {return !this.list.length
}

所以模板中就变成了：

<li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>