由于本樣例是基于vue3中來實現(xiàn)的，若你使用的是vue2，請在評論區(qū)中發(fā)表后，也會出vue2中的相關(guān)使用。fuse是一個前端自行進行模糊查詢的相關(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)說明，但在實際運用的時候，其中的某些配置項比較重要

3.fuse的實際運用

3.1 具體代碼

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

<template><div class="hello"><el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-optionremote 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>

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

一個初始化fuse

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

//初始化搜索引擎 const init_search = (list) => {fuse.value = new Fuse(list, {shouldSort: true, //是否按分數(shù)對結(jié)果列表排序threshold: 0.4, //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內(nèi)容。location: 0, // 確定文本中預(yù)期找到的模式的大致位置。distance: 100,minMatchCharLength: 1, // 模式的最大長度//搜索標題與作者名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虛擬機",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-optionremote 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ù)進行結(jié)核,形成遠程搜索 search_all.value = [{title: "Java虛擬機",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, //是否按分數(shù)對結(jié)果列表排序threshold: 0.4, //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內(nèi)容。location: 0, // 確定文本中預(yù)期找到的模式的大致位置。distance: 100,minMatchCharLength: 1, // 模式的最大長度//搜索標題與作者名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)幫助的話，請幫忙點個贊，若有其他疑問，歡迎在評論中發(fā)表，我們共同進步

總結(jié)

以上是生活随笔為你收集整理的vue中轻量级模糊查询fuse.js使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。