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

更新時(shí)間：2022年08月02日 14:56:35 作者：風(fēng)如也

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

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

先來(lái)看效果圖

在這里插入圖片描述

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

如何實(shí)現(xiàn)？

<template>
  <div class="container">
    <div class="search-bar">
      <el-input v-model="inputVal" placeholder="請(qǐng)輸入圖標(biāo)名稱(chēng)" 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: [], // 全部圖標(biāo)列表
    }
  },
  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 計(jì)算屬性來(lái)動(dòng)態(tài)獲得圖標(biāo)列表數(shù)據(jù)

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

方法1

使用 filter() 和 includes() 實(shí)現(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() 實(shí)現(xiàn)，（涉及到英文字母的還是建議處理一下大小寫(xiě)問(wè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() 正則匹配實(shí)現(xiàn)

語(yǔ)法：RegExp.test(string) ，string 要檢測(cè)的字符串

該方法用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式，如果匹配返回 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() 等

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

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

雖然一般這種行為都是在后端進(jìn)行但是有時(shí)候就是會(huì)給你這個(gè)需求，這里因?yàn)閿?shù)據(jù)量較小所以就進(jìn)行簡(jiǎn)單的遍歷查詢沒(méi)有對(duì)數(shù)據(jù)進(jìn)行排序后查詢其實(shí)有想過(guò)二分查找之類(lèi)的但是這里數(shù)據(jù)量較小就遍歷吧

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: