Vue2.5 旅游项目实例16 城市选择页-搜索逻辑实现

创建恩智：city-search-logic

拉取到本地并切换分支：

git pull
git checkout city-search-logic

打开search.vue文件，先增加一个显示结果区域，并给input增加双向绑定：

<template>
<div>
  <div class="search">
    <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
  </div>
  <div class="search-content">
    <ul>
      <li>123</li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'CitySearch',
  data () {
    return {
      keyword: ''
    }
  }
}
</script>

<style lang="stylus" scoped>
.search-content
  z-index: 1
  overflow: hidden
  position:absolute
  top: 1.58rem
  left:0
  right:0
  bottom:0
  background:green
</style>

然后回到City.vue文件，在city-search组件传递cities：

<city-search :cities="cities"></city-search>

再Search.vue接收：

props: {
    cities: Object
  },

定义一个空数组list和watch侦听器：

data () {
    return {
      keyword: '',
      list: []
    }
},
watch: {
    keyword () {

    }
}

再定义一个节流函数timer，默认为null：

data () {
    return {
      keyword: '',
      list: [],
      timer: null
    }
},
watch: {
    keyword () {
      console.log(111)
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.cities) {
          this.cities[i].forEach((value) => {
            // 当每项中的拼音或者名出符合时，push到result数组
            if (value.spell.indexOf(this.keyword) > -1 ||
             value.name.indexOf(this.keyword) > -1) {
              result.push(value)
            }
          })
        }
        this.list = result
      }, 100)
    }
}

然后把数据循环：

<li v-for="item in list" :key="item.id">{{item.name}}</li>

此时效果图：

 

继续优化代码，给li加一个样式search-item和下边框border-bottom：

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

<style lang="stylus" scoped>
.search-content
  z-index: 1
  overflow: hidden
  position:absolute
  top: 1.58rem
  left:0
  right:0
  bottom:0
  background:#eee
  .search-item
    padding-left: .2rem
    line-height: .62rem
    background: #fff
    color: #666
</style>

然后刷新重新搜索，样式改变了。

还有个问题，就是当我们输入a的时候，结果列表很多，但是不能滚动。这里我们也可以用better-scroll来实现页面的局部滚动。

添加代码：

<div class="search-content" ref="serach">

<script>
import Bscroll from 'better-scroll'
export default {
  mounted () {
    this.scroll = new Bscroll(this.$refs.serach)
  },
}
</script>
    

此时，输入a，下面结果列表可以实现滚动了。

还有个问题，就是当我们删除a的时候，下面的数据还有，解决办法：

keyword () {
      // 如果没有关键词，list设为空
      if (!this.keyword) {
        this.list = []
        return
      }
、、、
}

再就是当我们输入一个关键词，没有匹配的对象时，需要添加一个提示信息。

添加一个li：

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

但是还有问题就是一开始就显示“没有找到匹配数据”，我们希望的是开始显示列表，有关键词搜索的时候才显示这部分区域。

<div class="search-content" ref="serach" v-show="keyword">

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

下面进行一些优化：

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

<script>
import Bscroll from 'better-scroll'
export default {
  // 计算属性
  computed: {
    hasNoData () {
      return !this.list.length
    }
  },
}
</script>

OK，下面可以提交代码了：

git add .
git commit -m "实现城市列表的搜索逻辑"
git push

git checkout master
git merge city-search-logic
git push