直播软件搭建，利用精准搜索优化用户搜索体验

精准搜索

核心思想：将用户输入的字符串作为一个整体去与数组的每一项做匹配，把符合的保存下来即可。

这里主要用到的JavaScript字符串的indexOf()方法——返回某个指定的字符串值在字符串中首次出现的位置，如果不存在，则返回-1。

有一点需要注意，`indexOf()` 方法对大小写敏感！ 另外数组也有一个`indexOf()`方法

下面是上述实例的完整代码，当然实际开发的时候数据肯定没这么简单。我们这里使用的是Vue + Element

实现

<template>
  <div class="wrapper">
    <el-input
      clearable
      placeholder="请输入"
      suffix-icon="el-icon-search"
      v-model="searchMsg"
      size="mini"
      @input="handleSearch(searchMsg)"
    ></el-input>
    <el-checkbox-group v-model="checkList">
      <div v-for="(item, index) in filterMsg" :key="index">
        <el-checkbox :label="item">{{ item.name }}</el-checkbox>
      </div>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchMsg: "",
      checkList: [],
      filterMsg: []
    };
  },
  mounted() {
    this.allMsg = [
      { name: "myhua", id: 1 },
      { name: "mp3", id: 2 },
      { name: "hello", id: 3 },
      { name: "world", id: 4 },
      { name: "warm weather", id: 5 },
      { name: "m3", id: 6 },
      { name: "hahaha", id: 7 }
    ];
    this.filterMsg = this.allMsg;
  },
  methods: {
    // 搜索方法
    handleSearch(queryString) {
      this.filterMsg = [];
      this.allMsg.map(item => {
        if (item.name.indexOf(queryString) !== -1) {
          this.filterMsg.push(item);
        }
      });
    }
  }
};
</script>