vue中輕量級(jí)模糊查詢fuse.js使用方法步驟
更新時(shí)間：2024年01月15日 15:21:46 作者：離逝的楓
這篇文章主要給大家介紹了關(guān)于vue中輕量級(jí)模糊查詢fuse.js使用方法的相關(guān)資料,Fuse.js是一個(gè)功能強(qiáng)大、輕量級(jí)的模糊搜索庫,通過提供簡單的?api?調(diào)用,達(dá)到強(qiáng)大的模糊搜索效果,需要的朋友可以參考下
前言
由于本樣例是基于vue3中來實(shí)現(xiàn)的，fuse是一個(gè)前端自行進(jìn)行模糊查詢的相關(guān)插件，常用于系統(tǒng)路由菜單的相關(guān)搜索等數(shù)據(jù)量不太大的情況，若需要數(shù)據(jù)量很大，還是蠻建議通過后端返回?cái)?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)配置項(xiàng)的說明
2.1下面是fuse中的一些配置項(xiàng)的相關(guān)說明，但在實(shí)際運(yùn)用的時(shí)候，其中的某些配置項(xiàng)比較重要
3.fuse的實(shí)際運(yùn)用
3.1 具體代碼
這里我們是基于elementplus中的el-select組件來進(jìn)行運(yùn)用的，因?yàn)樵谶@個(gè)組件中會(huì)有一個(gè)方法，remote-method就是在我們搜索之前會(huì)執(zhí)行,此時(shí)就不需要在通過watch來監(jiān)聽search是否發(fā)生改變，因此這里的v-model就相當(dāng)于是多余的，就類似于遠(yuǎn)程搜索。那么就會(huì)有人問，問什么循環(huán)中是option.item.title呢？那是因?yàn)橥ㄟ^fuse模糊查詢出來的數(shù)據(jù)是被封裝到一個(gè)一個(gè)的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中比較重要的就兩個(gè)配置，這兩個(gè)配置如下
一個(gè)初始化fuse
其中的keys中的相關(guān)配置項(xiàng)，就是我們目標(biāo)數(shù)據(jù)list中的相關(guān)參數(shù)
//初始化搜索引擎
const init_search = (list) => {
fuse.value = new Fuse(list, {
shouldSort: true, //是否按分?jǐn)?shù)對(duì)結(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)重
}]
})
}一個(gè)是相關(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ù)可以和后臺(tái)返回的數(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ù)對(duì)結(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)重
}]
})
}
//也可以將這個(gè)放在created生命周期,這里使用了setup語法糖
init_search(search_all.value)
</script>總結(jié)
到此這篇關(guān)于vue中輕量級(jí)模糊查詢fuse.js使用的文章就介紹到這了,更多相關(guān)vue使用輕量級(jí)模糊查詢fuse.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通過vue手動(dòng)封裝on、emit、off的代碼詳解
這篇文章主要介紹了通過vue手動(dòng)封裝on，emit，off的代碼詳解，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue3動(dòng)態(tài)ref在組件卸載后保留key,值置為null,需手動(dòng)檢查null以避免錯(cuò)誤,不可刪除key,此為設(shè)計(jì)行為,旨在維護(hù)響應(yīng)式結(jié)構(gòu)完整性及性能優(yōu)化2025-07-07
vue - vue.config.js中devServer配置方式
今天小編就為大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue3的api解讀之ref和reactive詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue.js指令v-for使用以及下標(biāo)索引的獲取
今天小編就為大家分享一篇關(guān)于vue.js指令v-for使用以及下標(biāo)索引的獲取，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue中$router.back()和$router.go()的用法
這篇文章主要介紹了vue中$router.back()和$router.go()的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
一文詳解WebStorm如何調(diào)試Vue項(xiàng)目
這篇文章主要介紹了如何使用WebStorm進(jìn)行斷點(diǎn)調(diào)試,包括配置、啟動(dòng)本地應(yīng)用程序、設(shè)置斷點(diǎn)以及使用調(diào)試工具等步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼
本文主要介紹了Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router，這篇文章主要介紹了Vue?cli及Vue?router詳解,需要的朋友可以參考下2022-08-08