vue项目笔记（18）-搜索组件逻辑处理及代码优化

搜索组件逻辑处理及代码优化

在我遇到的项目中，对于对于搜索组件，部分是后台直接写好的接口，直接调用既可以完成搜索；另一种就是由前端完成搜索逻辑处理，如下：

1、首先，对输入框进行双向绑定（v-model=‘keyword’）；

代码如下：

<template>
  <div>
    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
    <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="hasNoData">
          没有招到匹配数据
        </li>
      </ul>
    </div>
  </div>
</template>

2、搜索的数据来源是有父组件City请求的数据cities，所以要从父组件传值过来。

3、定义给新数组list

4、监听函数（watch），监听keyword的变化

5、优化：为了减少函数执行的频率，使用延时计时器进行优化。

6、在搜索到的数据足够多的时候，我们可以使用better-scroll实现滚动效果。当搜索不到结果的时候，我们使用v-show控制显示效果。另外，删除搜索字符时，我们通过把list置空，来取消之前搜索的结果。

7、注意：我们尽量在html中不要使用逻辑代码，可以利用computed计算属性来代替。

代码如下：

<script>
  import Bscroll from 'better-scroll'
  export default{
    name: 'CitySearch',
    props: {
      cities: Object
    },
    mounted(){
      this.scroll = new Bscroll(this.$refs.search);
    },
    data(){
      return {
        keyword: '',
        list: [],
        timer: null
      }
    },
    computed: {
      hasNoData(){
        return !this.list.length;
      }
    },
    watch: {
      keyword(){
        console.log('111');
        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);
      }
    }
  }
</script>