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

1.安裝fuse.js

1.1如下是相關的引用和安裝，我們可以發現這種的引入后，就只占用15.8K的大小

npm install fuse.js import Fuse from 'fuse.js'

2.fuse相關配置項的說明

2.1下面是fuse中的一些配置項的相關說明，但在實際運用的時候，其中的某些配置項比較重要

3.fuse的實際運用

3.1 具體代碼

這里我們是基于elementplus中的el-select組件來進行運用的，因為在這個組件中會有一個方法，remote-method就是在我們搜索之前會執行,此時就不需要在通過watch來監聽search是否發生改變，因此這里的v-model就相當于是多余的，就類似于遠程搜索。那么就會有人問，問什么循環中是option.item.title呢？那是因為通過fuse模糊查詢出來的數據是被封裝到一個一個的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中的相關配置項，就是我們目標數據list中的相關參數

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

一個是相關列表

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

具體結果

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)//待全文搜索的全部數據 const search_all = ref([]) //搜索的結果 const search_result = ref([]) //后面的value的數據可以和后臺返回的數據進行結核,形成遠程搜索 search_all.value = [{title: "Java虛擬機",author: {firstName: "王浩",lastName: "wanghao"}},{title: "人工智能",author: {firstName: "侯建軍",lastName: "marquis"}} ] //搜索前出發 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, //是否按分數對結果列表排序threshold: 0.4, //匹配算法閾值。閾值為0.0需要完全匹配（字母和位置），閾值為1.0將匹配任何內容。location: 0, // 確定文本中預期找到的模式的大致位置。distance: 100,minMatchCharLength: 1, // 模式的最大長度//搜索標題與作者名keys: [{name: 'title',weight: 0.7 //設置權重}, {name: 'author.firstName',weight: 0.3 //設置權重}]}) } //也可以將這個放在created生命周期,這里使用了setup語法糖 init_search(search_all.value) </script>

若此文章對你有相關幫助的話，請幫忙點個贊，若有其他疑問，歡迎在評論中發表，我們共同進步

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。