直播軟體搭建，利用精準搜尋最佳化使用者搜尋體驗

云豹科技-苏凌霄發表於2024-08-10

精準搜尋

核心思想：將使用者輸入的字串作為一個整體去與陣列的每一項做匹配，把符合的儲存下來即可。

這裡主要用到的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>

另外字串的search()方法在這裡也能實現相同的效果，對大小寫敏感
在這裡推薦使用includes，這樣更語義化一些，自己有點懶這裡就沒改

相關文章