当前位置: 首页 > news >正文

fuse.js前端搜索简单使用的三个案例

Fuse.js 是一个轻量级的前端库,主要用于提供模糊搜索的功能。它非常灵活,易于集成,并且对搜索的结果可以进行配置和权重的调整。在打造用户友好的搜索体验时,Fuse.js 是前端开发者的优选。以下是三个简单的使用案例,展示如何将 Fuse.js 应用于不同的搜索需求中。

1. 基本文本搜索

假设有一个静态网站,我们希望能够允许用户在一个简单的文章数组中进行搜索。以下是使用 Fuse.js 实现该功能的基本步骤。

HTML:

<input type="text" id="search" placeholder="输入搜索关键字..."/>
<div id="result"></div>

JavaScript:

// 数据数组
const articles = [{ title: '文章一', content: '这是第一个测试文章的内容' },{ title: '文章二', content: '第二个测试文章的内容很丰富' },// ... 更多文章
];// Fuse.js 配置项
const options = {includeScore: true,// 定义搜索的键keys: ['title', 'content']
};// 初始化 Fuse 实例
const fuse = new Fuse(articles, options);// 绑定键盘输入事件监听
document.getElementById('search').addEventListener('input', function(e) {const result = fuse.search(e.target.value);document.getElementById('result').innerHTML = result.map(item => item.item.title).join('<br>');
});
 

在上述代码中,HTML 部分提供了一个输入框,用户可以在其中输入搜索关键词。JavaScript 部分则创建了一个数据数组 articles,并且初始化了一个 Fuse 实例,配置好搜索的键和其他选项。最后,监听输入框的内容变化,调用 fuse.search 方法来执行搜索,将搜索结果显示到结果区域。

2. 高级配置搜索

在较为复杂的搜索需求中,我们可能需要对搜索结果的精确度和相关性进行调整。Fuse.js 提供了高级的配置选项来满足这类需求。

JavaScript:

// 假设 articles 数据与第一个案例相同// 高级配置项
const advancedOptions = {isCaseSensitive: false,includeScore: true,threshold: 0.4, // 0 表示完全匹配,1 表示不匹配keys: [{name: 'title',weight: 0.7 // 更高的权重表明该字段在搜索中更为重要},{name: 'content',weight: 0.3}]
};// ... 其余代码与第一个案例相似
 
 

在这个例子中,我们新增了 isCaseSensitive 和 threshold 选项,分别用来设置搜索是否区分大小写和设置匹配的阈值。另外通过 keys 中的 weight 属性为每个搜索键指定权重,来影响搜索结果的排名。

3. 实时搜索建议

实时搜索建议可以提高用户的搜索效率,Fuse.js 可以轻松实现这一功能。

HTML:

<input type="text" id="search" placeholder="输入搜索关键字..." />
<ul id="suggestions"></ul>
 
 

JavaScript:

// 假设 articles 数据与第一个案例相同// 标准配置项
const options = {includeScore: true,keys: ['title', 'content']
};// 初始化 Fuse 实例
const fuse = new Fuse(articles, options);// 绑定键盘输入事件监听
document.getElementById('search').addEventListener('input', function(e) {const result = fuse.search(e.target.value);const suggestions = result.map(item =>`<li>${item.item.title}</li>`).join('');document.getElementById('suggestions').innerHTML = suggestions;
});
 
 

这里我们将搜索结果呈现为一个未排序列表,会随着用户输入的每个键盘字符而更新搜索结果。

http://www.hskmm.com/?act=detail&tid=29471

相关文章:

  • 题解:AT_abc288_h [ABC288Ex] A Nameless Counting Problem
  • 2025 年 CBN 砂轮源头厂家最新推荐榜单:专业实力与客户满意度全景解析及选购指南
  • JDK安装和卸载
  • Python定义一个User类的基本写法
  • 10.12 CSP-S模拟30 改题记录
  • 编译GreatSQL with RocksDB引擎
  • ubuntu源码编译指定版本make
  • 【LeetCode】274. H 指数
  • python之多态
  • Linux安装JDK1.8 tomcat MariaDB(MySQL删减版)
  • Ubuntu系统部署Anaconda环境及Python语言的详细流程
  • python之继承
  • RK3568+MCU实时机器人解决方案 - 教程
  • 做题记录 #2
  • 深度学习开源书籍的技术解析
  • Nginx怎么去做负载均衡?
  • 向量库面试题
  • 02 常用快捷键和指令
  • 深圳公共资源交易中心 www.szzfcg.cn
  • mysql百分数转小数点格式
  • mysql误删的performance_schema库
  • 操作系统内存管理思维导图总结
  • 15
  • 取证复刻1
  • 如何在Ubuntu中查看编辑lvgl的demo和examples?
  • 英语_翻译
  • 操作系统(Linux)文件系统思维导图总结
  • mysql不等于<>取特定值反向条件的时候字段有null值或空值读取不到数据
  • linux查看/修改各种资源限制ulimit
  • MySQL非root安装-初始化数据库时unknown variable ‘defaults-file=**/my.cnf‘