vue和js中如何實作模糊查詢

先來看效果圖

這種資料量少的場景适用于前端實作模糊查詢

如何實作？

<template>
  <div class="container">
    <div class="search-bar">
      <el-input v-model="inputVal" placeholder="請輸入圖示名稱" suffix-icon="el-icon-search" clearable></el-input>
    </div>
    <div class="icon-contain">
      <div class="icon-item" v-for="item in searchList" :key="item.icon">
        <i class="icon-style" :class="item.icon"></i>
        <span class="icon-name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
           

js部分

<script>
export default {
  data () {
    return {
      inputVal: '',
      list: [], // 全部圖示清單
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    searchList () {
      ....
    }
  },
  methods: {
    loadData() { // 初始化資料
      this.list = [
        { icon: 'el-icon-delete', name: 'el-icon-delete' },
        { icon: 'el-icon-setting', name: 'el-icon-setting' },
        { icon: 'el-icon-user', name: 'el-icon-user' },
        { icon: 'el-icon-star-off', name: 'el-icon-star-off' },
        { icon: 'el-icon-picture-outline', name: 'el-icon-picture-outline' },
        { icon: 'el-icon-s-custom', name: 'el-icon-s-custom' },
        { icon: 'el-icon-edit', name: 'el-icon-edit' },
        { icon: 'el-icon-folder-opened', name: 'el-icon-folder-opened' },
        { icon: 'el-icon-chat-dot-round', name: 'el-icon-chat-dot-round' },
        { icon: 'el-icon-upload', name: 'el-icon-upload' },
        { icon: 'el-icon-message-solid', name: 'el-icon-message-solid' }
      ]
    },
  }
}
</script>
           

我們用

computed

計算屬性來動态獲得圖示清單資料

想要達到的功能是：輸入框輸入内容，清單框能動态根據輸入值顯示輸入值相關的清單，即模糊查詢

方法1：使用

filter()

和

includes()

實作

computed: {
    searchList () {
      if (!this.inputVal) {
        return this.list
      }
      return this.list.filter(item => {
      	return item.name.includes(this.inputVal)
      })
      return data
    }
  },
           

方法2：使用

indexOf()

實作，（涉及到英文字母的還是建議處理一下大小寫問題）

computed: {
    searchList () {
      if (!this.inputVal) {
        return this.list
      }
      const data = []
      this.list.forEach(item => {
        if (item.name.toLowerCase().indexOf(this.inputVal.toLowerCase()) !== -1) {
          data.push(item)
        }
      })
      return data
    }
  },
           

方法3：使用

test()

正則比對實作

文法：RegExp.test(string) ，string 要檢測的字元串

該方法用于檢測一個字元串是否比對某個模式，如果比對傳回 true ，否則傳回 false

computed: {
    searchList () {
      if (!this.inputVal) {
        return this.list
      }
      const data = []
      const reg = new RegExp(this.inputVal.toLowerCase())
      this.list.forEach(item => {
        if (reg.test(item.name.toLowerCase())) {
          data.push(item)
        }
      })
      return data
    }
  },
           

還有其他的方法，如

split()

、

match()

等