由于本樣例是基于vue3中來實(shí)現(xiàn)的，若你使用的是vue2，請在評論區(qū)中發(fā)表后，也會出vue2中的相關(guān)使用。fuse是一個前端自行進(jìn)行模糊查詢的相關(guān)插件，常用于系統(tǒng)路由菜單的相關(guān)搜索等數(shù)據(jù)量不太大的情況，若需要數(shù)據(jù)量很大，還是蠻建議通過后端返回數(shù)據(jù)的相關(guān)形式。

1.安裝fuse.js

1.1如下是相關(guān)的引用和安裝，我們可以發(fā)現(xiàn)這種的引入后，就只占用15.8K的大小

npm install fuse.js    

import Fuse from 'fuse.js'

2.fuse相關(guān)配置項的說明

2.1下面是fuse中的一些配置項的相關(guān)說明，但在實(shí)際運(yùn)用的時候，其中的某些配置項比較重要

3.fuse的實(shí)際運(yùn)用

3.1 具體代碼

這里我們是基于elementplus中的el-select組件來進(jìn)行運(yùn)用的，因?yàn)樵谶@個組件中會有一個方法，remote-method就是在我們搜索之前會執(zhí)行,此時就不需要在通過watch來監(jiān)聽search是否發(fā)生改變，因此這里的v-model就相當(dāng)于是多余的，就類似于遠(yuǎn)程搜索。那么就會有人問，問什么循環(huán)中是option.item.title呢？那是因?yàn)橥ㄟ^fuse模糊查詢出來的數(shù)據(jù)是被封裝到一個一個的item中了。

<template>
  <div class="hello">
    <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option
      remote placeholder="Search" class="header-search-select" @change="change">
      <el-option v-for="option in search_result" :key="option.item.title" :value="option.item.title"
      :label="option.item.author.firstName" />
    </el-select>
  </div>
</template>

其實(shí)fuse中比較重要的就兩個配置，這兩個配置如下

一個初始化fuse

其中的keys中的相關(guān)配置項，就是我們目標(biāo)數(shù)據(jù)list中的相關(guān)參數(shù)

//初始化搜索引擎 
const init_search = (list) => {
  fuse.value = new Fuse(list, {
    shouldSort: true,  //是否按分?jǐn)?shù)對結(jié)果列表排序
    threshold: 0.4,    //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內(nèi)容。
    location: 0,    // 確定文本中預(yù)期找到的模式的大致位置。
    distance: 100,
    minMatchCharLength: 1, // 模式的最大長度
    //搜索標(biāo)題與作者名
    keys: [{
      name: 'title',
      weight: 0.7    //設(shè)置權(quán)重
    }, {
      name: 'author.firstName',
      weight: 0.3    //設(shè)置權(quán)重
    }]
  })
}

一個是相關(guān)列表

search_all.value = [
  {
    title: "Java虛擬機(jī)",
    author: {
      firstName: "王浩",
      lastName: "wanghao"
    }
  },
  {
    title: "人工智能",
    author: {
      firstName: "侯建軍",
      lastName: "marquis"
    }
  }
]

具體結(jié)果

4.完整代碼

<template>
  <div class="hello">
    <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option
      remote placeholder="Search" class="header-search-select" @change="change">
      <el-option v-for="option in search_result" :key="option.item.title" :value="option.item.title"
      :label="option.item.author.firstName" />
    </el-select>
  </div>
</template>

<script setup name="HelloWorld">
import { ref } from '@vue/reactivity'
import Fuse from 'fuse.js'

const fuse = ref(undefined)

//待全文搜索的全部數(shù)據(jù) 
const search_all = ref([])
//搜索的結(jié)果 
const search_result = ref([])
//后面的value的數(shù)據(jù)可以和后臺返回的數(shù)據(jù)進(jìn)行結(jié)核,形成遠(yuǎn)程搜索 
search_all.value = [
  {
    title: "Java虛擬機(jī)",
    author: {
      firstName: "王浩",
      lastName: "wanghao"
    }
  },
  {
    title: "人工智能",
    author: {
      firstName: "侯建軍",
      lastName: "marquis"
    }
  }
]
//搜索前出發(fā) 
const querySearch = (search_value) =>{
  if(search_value === ''){
    search_result.value = []
  }else{
    search_result.value = fuse.value.search(search_value)
    console.log( search_result.value);
  }
}

//初始化搜索引擎 
const init_search = (list) => {
  fuse.value = new Fuse(list, {
    shouldSort: true,  //是否按分?jǐn)?shù)對結(jié)果列表排序
    threshold: 0.4,    //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內(nèi)容。
    location: 0,    // 確定文本中預(yù)期找到的模式的大致位置。
    distance: 100,
    minMatchCharLength: 1, // 模式的最大長度
    //搜索標(biāo)題與作者名
    keys: [{
      name: 'title',
      weight: 0.7    //設(shè)置權(quán)重
    }, {
      name: 'author.firstName',
      weight: 0.3    //設(shè)置權(quán)重
    }]
  })
}
//也可以將這個放在created生命周期,這里使用了setup語法糖
init_search(search_all.value)
</script>

若此文章對你有相關(guān)幫助的話，請幫忙點(diǎn)個贊，若有其他疑問，歡迎在評論中發(fā)表，我們共同進(jìn)步文章來源地址http://www.zghlxwxcb.cn/news/detail-786621.html