使用Fuse.js将动态搜索添加到React应用

Fuse.js是一个轻量级的搜索引擎，可以在用户的浏览器中的客户端运行。让我们看看如何使用它来轻松地为React应用添加搜索功能。

何时使用Fuse.js

搜索功能对很多类型的网站都很有用，可以让用户高效地找到他们想要的东西。但为什么我们会专门选择使用Fuse.js呢?

为搜索提供动力的选择有很多，最简单的可能是使用现有的数据库。例如，Postgres有一个全文搜索功能。MySQL也有，Redis也有RediSearch模块。

还有一些专门的搜索引擎，其中Elasticsearch和Solr是最受欢迎的。这些搜索引擎需要更多的设置，但它们拥有你的用例可能需要的高级功能。

最后，你可以使用Algolia或Swiftype等搜索即服务平台。这些服务运行自己的搜索基础架构。你只需通过API提供数据、配置和查询。

但是，您可能不需要这些解决方案所暴露的能力，这可能需要大量的工作来实现，更不用说成本了。如果没有太多的数据需要搜索，Fuse.js需要最小的设置，并且可以提供比您自己可能想到的更好的搜索体验。

至于多少数据对Fuse.js来说是过多的，考虑到Fuse.js需要访问整个数据集，所以你需要在客户端全部加载。如果数据集的大小是100MB，那就超出了发送给客户端的合理范围。但如果它只有几千字节，它可能是Fuse.js的一个很好的候选者。

构建一个Fuse.js + React演示应用程序

让我们做一个基本的React应用，使用Fuse.js让用户搜索狗的品种。你可以在这里查看最终的结果，源代码可以在GitHub上找到。

我们将从设置一些脚手架开始。从一个新的Node.js项目开始，我们将安装React和Fuse.js：

 
 
 
 
    
  
  
  
  
  1. npm install --save react react-dom fuse.js
    2. 
  
  
  
  
  2. //or
    3. 
  
  
  
  
  3. yarn add react react-dom fuse.js
    4.

我们还将安装Parcel作为开发依赖项：

 
 
 
 
    
  
  
  
  
  1. npm install --save-dev parcel@2.0.0-beta.1
    2. 
  
  
  
  
  2. //or
    3. 
  
  
  
  
  3. yarn add --dev parcel@2.0.0-beta.1
    4.

我们将在 package.json 启动脚本中使用它来编译应用程序：

 
 
 
 
    
  
  
  
  
  1. {  
    2. 
  
  
  
  
  2.   "scripts": {
    3. 
  
  
  
  
  3.     "start": "parcel serve ./index.html --open"
    4. 
  
  
  
  
  4.   }
    5. 
  
  
  
  
  5. }
    6.

接下来，我们将创建一个barebones index.html，其中包含一个空的 div 供React渲染，以及一个 noscript 消息，以避免在用户禁用JavaScript时出现空白页面。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.     
  •     
  •       

    Please enable JavaScript to view this page.

  •     
  •     
  •   

  • 我们将使我们的 index.js 简单的开始。我们将渲染一个有搜索查询输入的表单，尽管我们还不会实际处理搜索。

     
 
 
 
      
  
  
  
  
    1. import React, { useState } from "react";
      2. 
  
  
  
  
    2. import ReactDom from "react-dom";
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. function Search() {
      5. 
  
  
  
  
    5.   return (
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.       Search for a dog breed:
      8. 
  
  
  
  
    8.       
      9. 
  
  
  
  
    9.       
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.   );
      12. 
  
  
  
  
    12. }
      13. 
  
  
  
  
    13. 
  
  
  
  
    14. ReactDom.render(, document.getElementById("app"));
      15.

    此时，如果你运行 npm run start 或 yarn run start，Parcel应该会在浏览器中打开网站，你应该会看到这个表单。

    实施搜索

    现在开始实施搜索，我们将从显示搜索结果的组件开始。我们需要处理三种情况：

    我们将在ordered list中显示所有结果。

     
 
 
 
      
  
  
  
  
    1. function SearchResults(props) {
      2. 
  
  
  
  
    2.   if (!props.results) {
      3. 
  
  
  
  
    3.     return null;
      4. 
  
  
  
  
    4.   }
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.   if (!props.results.length) {
      7. 
  
  
  
  
    7.     return 
      There are no results for your query.
      ;
      8. 
  
  
  
  
    8.   }
      9. 
  
  
  
  
    9. 
  
  
  
  
    10.   return (
      11. 
  
  
  
  
    11.     
        
  
  
  
  
      1.       {props.results.map((result) => (
        2. 
  
  
  
  
      2.         {result}
        3. 
  
  
  
  
      3.       ))}
        4. 
  
  
  
  
      4.     
      12. 
  
  
  
  
    12.   );
      13. 
  
  
  
  
    13. }
      14.

    我们也来编写自己的搜索函数。稍后，我们将能够将我们的简单方法的结果与Fuse.js的结果进行比较。

    我们的方法很简单：我们将遍历犬种数组(来自这个JSON列表)，并返回包含整个搜索查询的所有犬种。我们还会让所有东西都小写，这样搜索就不区分大小写了。

     
 
 
 
      
  
  
  
  
    1. const dogs = [
      2. 
  
  
  
  
    2.   "Affenpinscher",
      3. 
  
  
  
  
    3.   "Afghan Hound",
      4. 
  
  
  
  
    4.   "Aidi",
      5. 
  
  
  
  
    5.   "Airedale Terrier",
      6. 
  
  
  
  
    6.   "Akbash Dog",
      7. 
  
  
  
  
    7.   "Akita",
      8. 
  
  
  
  
    8.   // More breeds..
      9. 
  
  
  
  
    9. ];
      10. 
  
  
  
  
    10. 
  
  
  
  
    11. function searchWithBasicApproach(query) {
      12. 
  
  
  
  
    12.   if (!query) {
      13. 
  
  
  
  
    13.     return [];
      14. 
  
  
  
  
    14.   }
      15. 
  
  
  
  
    15. 
  
  
  
  
    16.   return dogs.filter((dog) => dog.toLowerCase().includes(query.toLowerCase()));
      17. 
  
  
  
  
    17. }
      18.

    接下来，让我们将所有内容链接在一起，方法是从表单提交中获取搜索查询，然后执行搜索并显示结果。

     
 
 
 
      
  
  
  
  
    1. function Search() {
      2. 
  
  
  
  
    2.   const [searchResults, setSearchResults] = useState(null);
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.   return (
      5. 
  
  
  
  
    5.     <>
      6. 
  
  
  
  
    6.       
  
  
  
  
    7.         onSubmit={(event) => {
      8. 
  
  
  
  
    8.           event.preventDefault();
      9. 
  
  
  
  
    9.           const query = event.target.elements.query.value;
      10. 
  
  
  
  
    10.           const results = searchWithBasicApproach(query);
      11. 
  
  
  
  
    11.           setSearchResults(results);
      12. 
  
  
  
  
    12.         }}
      13. 
  
  
  
  
    13.       >
      14. 
  
  
  
  
    14.         Search for a dog breed:
      15. 
  
  
  
  
    15.         
      16. 
  
  
  
  
    16.         
      17. 
  
  
  
  
    17.       
      18. 
  
  
  
  
    18. 
  
  
  
  
    19.       
      20. 
  
  
  
  
    20.     
      21. 
  
  
  
  
    21.   );
      22. 
  
  
  
  
    22. }
      23.

    添加Fuse.js

    使用Fuse.js很简单，我们需要导入它，让它使用 new Fuse() 对数据进行索引，然后使用索引的搜索功能。搜索会返回一些元数据，所以我们将只提取实际的项目进行展示。

     
 
 
 
      
  
  
  
  
    1. import Fuse from "fuse.js";
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. const fuse = new Fuse(dogs);
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. function searchWithFuse(query) {
      6. 
  
  
  
  
    6.   if (!query) {
      7. 
  
  
  
  
    7.     return [];
      8. 
  
  
  
  
    8.   }
      9. 
  
  
  
  
    9. 
  
  
  
  
    10.   return fuse.search(query).map((result) => result.item);
      11. 
  
  
  
  
    11. }
      12.

    元数据包括一个 refIndex 整数，让我们可以回溯到原始数据集中的相应项目。如果我们用 new Fuse(dogs, {includeScore: true}) 初始化索引，我们也会得到匹配分数：一个介于0和1之间的值，其中0是完全匹配。那么“Husky”的搜索结果就会像这样：

     
 
 
 
      
  
  
  
  
    1. [
      2. 
  
  
  
  
    2.   {
      3. 
  
  
  
  
    3.     item: "Siberian Husky",
      4. 
  
  
  
  
    4.     refIndex: 386,
      5. 
  
  
  
  
    5.     score: 0.18224241177399383
      6. 
  
  
  
  
    6.   }
      7. 
  
  
  
  
    7. ]
      8.

    我们将在 Search 组件的表单中添加一个复选框，让用户选择是否使用Fuse.js而不是基本的搜索函数。

     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
    2.   onSubmit={(event) => {
      3. 
  
  
  
  
    3.     event.preventDefault();
      4. 
  
  
  
  
    4.     const query = event.target.elements.query.value;
      5. 
  
  
  
  
    5.     const useFuse = event.target.elements.fuse.checked;
      6. 
  
  
  
  
    6.     setSearchResults(
      7. 
  
  
  
  
    7.       useFuse ? searchWithFuse(query) : searchWithBasicApproach(query)
      8. 
  
  
  
  
    8.     );
      9. 
  
  
  
  
    9.   }}
      10. 
  
  
  
  
    10. >
      11. 
  
  
  
  
    11.   Search for a dog breed: 
      12. 
  
  
  
  
    12.   
      13. 
  
  
  
  
    13.   
      14. 
  
  
  
  
    14.    Use Fuse.js
      15. 
  
  
  
  
    15.   
      16. 
  
  
  
  
    16.

    现在我们可以用Fuse.js进行搜索了!我们可以使用复选框来比较使用它和不使用它。

    最大的区别在于Fuse.js可以容忍错别字(通过近似字符串匹配)，而我们的基本搜索则需要精确匹配。如果我们把“retriever”拼错为“retreiver”，请查看基本搜索结果。

    以下是针对同一查询更有用的Fuse.js结果：

    搜索多个字段

    如果我们关心多个字段，我们的搜索可能会更复杂。例如，想象一下，我们想通过品种和原产国来搜索。Fuse.js支持这种用例。当我们创建索引时，我们可以指定要索引的对象键。

     
 
 
 
      
  
  
  
  
    1. const dogs = [
      2. 
  
  
  
  
    2.   {breed: "Affenpinscher", origin: "Germany"},
      3. 
  
  
  
  
    3.   {breed: "Afghan Hound", origin: "Afghanistan"},
      4. 
  
  
  
  
    4.   // More breeds..
      5. 
  
  
  
  
    5. ];
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. const fuse = new Fuse(dogs, {keys: ["breed", "origin"]});
      8.

    现在，Fuse.js将同时搜索 breed 和 origin 字段。

    总结

    有时候，我们不想花费资源去建立一个完整的Elasticsearch实例。当我们有简单的需求时，Fuse.js可以提供相应的简单解决方案。而正如我们所看到的，将它与React一起使用也是很简单的。

    即使我们需要更高级的功能，Fuse.js也允许给不同的字段赋予不同的权重，添加 AND 和 OR 逻辑，调整模糊匹配逻辑等等。当你下次需要在应用中添加搜索功能时，可以考虑使用它。

    新闻标题：使用Fuse.js将动态搜索添加到React应用
    分享网址：http://www.shufengxianlan.com/qtweb/news18/366218.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    移动网站建设知识

    分类信息网站

    德阳电信服务器托管　　 　成都温江机房　　 　德阳做网站　　 　节能环保网站建设方案　　 　成都钢筋机械设备　　 　Google外贸推广　　 　青羊区雕琢时光　　 　香港主机　　 　网站定制　　 　成都网络营销　　 　成都主机租用　　 　德阳东方电机技改　　 　重庆网站设计　　 　黔盛装饰　　 　绵阳机房托管　　 　企业微信定制　　 　云服务器　　 　关键词排名优化　　 　鼎尚理发店　　 　中晴建设