Vue2.5 学习笔记 8.8 城市列表页的搜索功能实现

布满荆棘的人生 2022-02-25 15:44 255阅读 0赞

嗯。。看来教程还是有说搜索功能的嘛 嘿嘿

好了 直接上内容：

1.首先做一个搜索结果显示的样式：

<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>

2. 将搜索框中的数据与data中的keyword做双向绑定：

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

3. 将cities（城市列表的json数据）由父组件传递到子组件中

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

4. 利用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>

5. 美化样式：

<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>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

6. 页面是完成好了。但是有瑕疵。比如 没办法滚动。这时候就需要借助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>

7. 还有一个问题。当搜索框搜索完成之后，清掉搜索框的内容。下面的页面却依然显示搜索结果。那就如下处理：

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)
        }
      },

8. 添加一个功能。 在没有匹配项的时候给出提示

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

9. 还有一个问题。  如果我不需要搜索东西的时候 能不能把搜索结果隐藏起来。

<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>

完成

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220225/deed19a44ba849d7920b215f1ed95bd8.png