vue和js中實現(xiàn)模糊查詢方式

更新時間：2022年08月02日 14:56:35 作者：風如也

這篇文章主要介紹了vue和js中實現(xiàn)模糊查詢方式，具有很好的參考價值，希望對大家有所幫助。也希望大家多多支持腳本之家

vue和js實現(xiàn)模糊查詢

先來看效果圖

在這里插入圖片描述

這種數(shù)據(jù)量少的場景適用于前端實現(xiàn)模糊查詢

如何實現(xiàn)？

<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() { // 初始化數(shù)據(jù)
      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 計算屬性來動態(tài)獲得圖標列表數(shù)據(jù)

想要達到的功能是：輸入框輸入內容，列表框能動態(tài)根據(jù)輸入值顯示輸入值相關的列表，即模糊查詢

方法1

使用 filter() 和 includes() 實現(xiàn)

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

方法2

使用 indexOf() 實現(xiàn)，（涉及到英文字母的還是建議處理一下大小寫問題）

  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() 正則匹配實現(xiàn)

語法：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() 等

正則表達式實現(xiàn)模糊查詢

拿到一個新需求就是在前端進行查詢一個數(shù)據(jù)

雖然一般這種行為都是在后端進行但是有時候就是會給你這個需求，這里因為數(shù)據(jù)量較小所以就進行簡單的遍歷查詢沒有對數(shù)據(jù)進行排序后查詢其實有想過二分查找之類的但是這里數(shù)據(jù)量較小就遍歷吧

? ? search() {
? ? ? console.log(this.searchInformation)
? ? ? this.listData = []
? ? ? var str = ".*" + this.searchInformation + ".*"
? ? ? let reg = new RegExp(str)
? ? ? //這里通過邀請碼查詢
? ? ? for(var i=0;i<this.wholeListData.length;i++){
? ? ? ? if(reg.test(this.wholeListData[i].content)){
? ? ? ? ? this.listData.push(this.wholeListData[i])
? ? ? ? }
? ? ? }
? ? ? //通過附加信息查詢
? ? ? for(var i=0;i<this.wholeListData.length;i++){
? ? ? ? if(reg.test(this.wholeListData[i].addition)){
? ? ? ? ? this.listData.push(this.wholeListData[i])
? ? ? ? }
? ? ? }
? ? },

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: