Vue学习笔记-项目开发3.9搜索查询（城市搜索功能）

一、添加样式
增加搜索显示的地方search-content，添加搜索显示的样式，相当于在之前的页面上增加一个图层，搜索的时候显示，不搜索的时候显示城市列表

<template>
// 需要用一个div包裹下 因为template只允许子标签只有一组
  <div>
    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
   //这里开始 上面的那些是之前的内容
    <div
      class="search-content">
      <ul>
        <li>
        </li>
      </ul>
    </div>
  </div>
</template>
 
<style lang="stylus" scoped>
// 与.search平级
  .search-content
    z-index: 1
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
</style>

二、数据双向绑定
将搜索框中的数据与data中的keyword做双向绑定

    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
 
data () {
    return {
      keyword: ''
    }
  }

三、数据处理
将cities（城市列表的json数据）由父组件传递到子组件中

//
City.vue
 
<city-search :cities="cities"></city-search>
 
//Search.vue
 
  props: {
    cities: Object
  }

三A、监听搜索框
通过watch监听keyword搜索框的输入并获取cities中的数据（根据拼音或中文检索）迭代显示出来

  props: {
    cities: Object
  },
  data () {
    return {
      keyword: '',
      list: [],
      timer: null
    }
  }, 
  watch: {
	// 监听变量 keyword的变化
    keyword () {
	  // 函数节流。省资源
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        const result = []
		// 将city.json的数据迭代出来（该json有2层 第一层是字母 第二层是字母所包含的城市信息）
        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)
    }
  }
 
<template>
    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
    <div
      class="search-content"
    >
      <ul>
//迭代出城市名称 
        <li
          v-for="item of list"
        >
          {{item.name}}
        </li>
</template>

五、美化样式

        <li
// 添加类
          class="search-item border-bottom"
          v-for="item of list"
        >
          {{item.name}}
        </li>
<style>
  .search-content
    z-index: 1
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
    .search-item
      line-height: .62rem
      padding-left: .2rem
      background: #fff
      color: #666
</style>

六、增加滚动
当搜索出的结果较多时，需要滚动，需要通过Bscroll来实现

    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
    <div
      class="search-content"
// 这里 绑定DOM元素 
      ref="search"
    >
 
 
<script>
import Bscroll from 'better-scroll'
  mounted () {
    this.scroll = new Bscroll(this.$refs.search)
  }
</script>

七、清除已搜索内容
当搜索框搜索完成之后，清掉搜索框的内容。下面的页面却依然显示搜索结果。那就如下处理

  watch: {
    keyword () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
	  // 这里做判断。如果搜索栏为空了 就将数据清空。页面也就不再显示内容了
      if (!this.keyword) {
        this.list = []
        return
      }
      this.timer = setTimeout(() => {
        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)
    }
  },

八、增加无匹配项提示
在没有匹配项的时候给出提示

        <li class="search-item border-bottom" v-show="hasNoData">
          没有找到匹配数据
        </li>
 
  computed: {
    hasNoData () {
      return !this.list.length
    }
  }

九、合理隐藏搜索结果
如果我不需要搜索东西的时候 能不能把搜索结果隐藏起来。

    <div
      class="search-content"
      ref="search"
	  // 现实与否取决于keyword是否有值
      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="hasNoData">
          没有找到匹配数据
        </li>
      </ul>
    </div>