vue中轻量级模糊查询fuse.js使用

这篇具有很好参考价值的文章主要介绍了vue中轻量级模糊查询fuse.js使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于本样例是基于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中的一些配置项的相关说明,但在实际运用的时候,其中的某些配置项比较重要

fuse.js,业务场景,vue3,javascript,vue.js,前端,Powered by 金山文档

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-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中的相关配置项,就是我们目标数据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"
    }
  }
]

具体结果

fuse.js,业务场景,vue3,javascript,vue.js,前端,Powered by 金山文档
fuse.js,业务场景,vue3,javascript,vue.js,前端,Powered by 金山文档

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)

//待全文搜索的全部数据 
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>

若此文章对你有相关帮助的话,请帮忙点个赞,若有其他疑问,欢迎在评论中发表,我们共同进步文章来源地址https://www.toymoban.com/news/detail-786621.html

到了这里,关于vue中轻量级模糊查询fuse.js使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Go语言打造轻量级Web框架

    前言 Web框架是Web开发中不可或缺的组件。它们的主要目标是抽象出HTTP请求和响应的细节,使开发人员可以更专注于业务逻辑的实现。在本篇文章中,我们将使用Go语言实现一个简单的Web框架,类似于Gin框架。 功能 我们的Web框架需要实现以下功能: 路由:处理HTTP请求的路由

    2023年04月08日
    浏览(56)
  • 树莓派使用Nginx 搭建轻量级网站远程访问

    转载自cpolar极点云文章:树莓派使用Nginx 搭建轻量级网站远程访问 安装 Nginx(发音为“engine-x”)可以将您的树莓派变成一个强大的 Web 服务器,可以用于托管网站或 Web 应用程序。相比其他 Web 服务器,Nginx 的内存占用率非常低,可以在树莓派等资源受限的设备上运行。同时

    2024年02月11日
    浏览(45)
  • 教你使用PHP实现一个轻量级HTML模板引擎

    🏆作者简介,黑夜开发者,全栈领域新星创作者✌,2023年6月csdn上海赛道top4。多年电商行业从业经验,对系统架构,数据分析处理等大规模应用场景有丰富经验。 🏆本文已收录于PHP专栏:PHP进阶实战教程。 🏆另有专栏PHP入门基础教程,希望各位大佬多多支持❤️。 在 W

    2024年02月15日
    浏览(51)
  • Java轻量级全文检索引擎Lucene使用及优化

    Lucene是一个开源的全文检索引擎工具包由Doug Cutting编写。它被设计用于实现全文搜索功能,即读入一堆文本文件并将其转换为易于搜索的数据结构。Lucene提供了一组简单而强大的API,使得索引和搜索过程变得非常方便。 Lucene广泛应用于从1200万站点中进行互联网搜索等搜索引

    2024年02月16日
    浏览(54)
  • 详解-树莓派使用Nginx 搭建轻量级网站远程访问(1)

    转载自cpolar极点云文章:树莓派使用Nginx 搭建轻量级网站远程访问 安装 Nginx(发音为“engine-x”)可以将您的树莓派变成一个强大的 Web 服务器,可以用于托管网站或 Web 应用程序。相比其他 Web 服务器,Nginx 的内存占用率非常低,可以在树莓派等资源受限的设备上运行。同时

    2024年02月12日
    浏览(45)
  • 【HarmonyOS】API6使用storage实现轻量级数据存储

     写在前面 本篇内容基于API6 JS语言进行开发,通过结合轻量级数据存储开发指导的文档,帮助大家完成一个实际的代码案例,通过这个小案例,可以实现简单数据的存储。 参考文档:文档中心 1、页面布局 首先我们编写一个简单的页面布局,页面中只有一个文本和两个按钮

    2024年02月14日
    浏览(40)
  • 云原生之使用Docker部署Teedy轻量级文档管理系统

    Teedy是一个开源的、功能丰富、易于使用和自定义的文档管理工具,它能够帮助用户管理和组织文档,适用于个人、小组和组织使用。 创建和编辑文档:用户可以使用Markdown格式创建和编辑文档,还可以添加标签和注释。 文件上传和管理:用户可以上传和管理文档、图片和其

    2024年01月20日
    浏览(60)
  • 使用python电脑轻量级控制手机—adb命令和手机投屏

    通过电脑控制手机有多种方式如appnium等,本文介绍的是两种轻量级的方案,使用adb命令刚和手机投屏。 1、手机设置 开发者选项—usb调试—无线调试 2、配对 仅配对时用,第一次配对成功后无需再次使用。 2.1、adb pair 手机IP:端口,下图蓝色部分的ip和端口 2.2、输入配对码。

    2024年02月03日
    浏览(46)
  • C++轻量级跨平台桌面GUI库FLTK的简单使用

    C++的跨平台桌面GUI库有很多,大体上分成两种流派:retained mode和immediate mode。 其中前者是主流的桌面GUI机制框架,包括:Qt、wxwidgets、gtk、juce等 后者是一些游戏引擎编辑器常用的GUI机制框架,包括:imgui、nanogui等 使用这些框架都支持构建在windows、mac、linux上面能运行的桌面

    2024年02月08日
    浏览(58)
  • 轻量级实时跟踪算法NanoTrack在瑞芯微RK3588上的部署以及使用

    文章目录 前言 一、模型转换 1.环境配置 2.模型解构 二、rk3588平台使用 1.模型初始化 2.推理 github: https://github.com/Try2ChangeX/NanoTrack_RK3588_python: python版本基于rk3588的NanoTrack,每秒可达120FPS 主要参考: SiamTrackers/NanoTrack at master · HonglinChu/SiamTrackers · GitHub GitHub - rockchip-linux/rknn-tool

    2024年02月13日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包