vue中輕量級模糊查詢fuse.js使用方法步驟
更新時間：2024年01月15日 15:21:46 作者：離逝的楓
這篇文章主要給大家介紹了關(guān)于vue中輕量級模糊查詢fuse.js使用方法的相關(guān)資料,Fuse.js是一個功能強大、輕量級的模糊搜索庫,通過提供簡單的?api?調(diào)用,達到強大的模糊搜索效果,需要的朋友可以參考下
前言
由于本樣例是基于vue3中來實現(xià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就相當于是多余的，就類似于遠程搜索。那么就會有人問，問什么循環(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-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>其實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-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ù)進行結(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>總結(jié)
到此這篇關(guān)于vue中輕量級模糊查詢fuse.js使用的文章就介紹到這了,更多相關(guān)vue使用輕量級模糊查詢fuse.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了uni-app 常用API，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue基于環(huán)境變量統(tǒng)一的多級路徑部署終極指南
這篇文章主要為大家詳細介紹了一個完整的解決方案,從環(huán)境變量配置到Nginx部署,確保你的Vue項目可以靈活部署在任何路徑下,下面小編就為大家簡單介紹一下吧2025-08-08
這篇文章主要給大家介紹了關(guān)于vue.js提交按鈕時如何進行簡單的if判斷表達式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要給大家介紹了關(guān)于如何使用Vue做個簡單的比較兩個數(shù)字大小頁面的相關(guān)資料,實現(xiàn)一個比較兩個數(shù)字大小的頁面，練習(xí)Vue實例的創(chuàng)建、數(shù)據(jù)綁定和事件監(jiān)聽方法,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了VueCli3中兼容IE11配置的艱苦歷程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
文章主要介紹了Vue中的v-if、v-else-if和v-else的等這三種指令的使用方法和場景,還對比了v-if和v-show的區(qū)別,并提供了實際開發(fā)中選擇v-if或v-show的的建議2026-05-05
這篇文章主要介紹了vue element table表格相同名稱列合并方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了分析總結(jié)20道Vue高頻面試題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
使用vue也好有一段時間了，雖然對其雙向綁定原理也有了解個大概，但也沒好好探究下其原理實現(xiàn)，下面這篇文章通過源碼主要分析了Vue的雙向數(shù)據(jù)綁定，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09