vue和js中實現模糊查詢方式

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

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

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 計算屬性來動態(tài)獲得圖標列表數據

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

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

正則表達式實現模糊查詢

拿到一個新需求就是在前端進行查詢一個數據

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

? ? 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])
? ? ? ? }
? ? ? }
? ? },

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

您可能感興趣的文章: