Aperçu rapide
Lors de la configuration de la recherche de clients, nous nous appuyons généralement sur des méthodes de comparaison de chaînes comme IndexOf, contient, etc. Ces méthodes fonctionnent bien, mais dans des situations réelles, les utilisateurs peuvent rechercher en utilisant des orthographes incorrectes, des phrases brouillées, etc. La recherche floue nous aide à résoudre ces problèmes.
Recherche floue
La recherche floue, également connue sous le nom de correspondance approximative des chaînes, est une technique utilisée pour trouver des chaînes similaires mais pas exactement les mêmes.
Maintenant, commençons par la création de l’application.
Nous allons configurer une page de base qui comprend du texte et une zone de recherche.
Application de base React pour la démo de recherche
Une application de réaction simple pour démontrer la fonctionnalité de recherche.
Recherche régulière
En règle générale, nous utilisons des méthodes de comparaison de chaînes comme IndexOf, contient, etc. Celles-ci fonctionnent bien, mais elles ne fournissent pas de résultats s’il y a des erreurs d’orthographe dans la requête de recherche.
Item.js:
Affiche les éléments individuels avec leur logo, leur nom et leurs balises.
import React from "react";
const Item = (props) => {
return (
<div className="item">
<div className="logo">
<img src={props.logo} alt={props.name} />
</div>
<div className="name">
<p>{props.name}</p>
<div className="tags">{props.tags.join(", ")}</div>
</div>
</div>
);
};
export default Item;
Data.js:
Contient un tableau d’objets représentant différentes technologies avec leurs noms, logos et balises.
[
{
"name": "Booty Bounce",
"logo": "https://cdn.worldvectorlogo.com/logos/bootstrap-4.svg",
"tags": ["dancing-css", "boot-stomping", "html-hop", "sass-swing"]
},
{
"name": "React-o-Rama",
"logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png",
"tags": ["spinny-js", "state-masters", "fronty-mcfrontend"]
},
{
"name": "Angu-latte",
"logo": "https://angular.io/assets/images/logos/angular/angular.png",
"tags": ["typescript-tornado", "web-zest", "framework-feels"]
},
{
"name": "Vue-tiful Bliss",
"logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",
"tags": ["zen-js", "pretty-view", "framework-bae"]
},
{
"name": "Ant Party",
"logo": "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
"tags": ["system-sass", "fancy-ui", "antd-vibes"]
},
{
"name": "Git Giggle",
"logo": "https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png",
"tags": ["commit-fun", "repo-riff", "c-git-jig"]
},
{
"name": "Gruntastic",
"logo": "https://gruntjs.com/img/og.png",
"tags": ["js-run-wild", "task-mania"]
},
{
"name": "jQuirky",
"logo": "https://w7.pngwing.com/pngs/265/442/png-transparent-jquery-octos-global-javascript-library-document-object-model-ajax-framework-text-trademark-logo-thumbnail.png",
"tags": ["selecto-magic", "fun-dome", "libra-party"]
},
{
"name": "D3-Licious",
"logo": "https://raw.githubusercontent.com/d3/d3-logo/master/d3.png",
"tags": ["data-candy", "viz-buzz", "chart-bliss"]
}
]
Setting.js:
Le code implémente une fonction de recherche dans une application React où les utilisateurs peuvent rechercher des outils et des technologies par nom ou balises. Il filtre les données en temps réel, ce qui rend la recherche insensible à la recherche et met à jour les résultats affichés comme l’utilisateur type dans la zone de recherche.
import React, { useState } from "react";
import data from "./data.json";
import Item from "./item";
const SettingsPage = () => {
const [searchData, setSearchData] = useState(data);
const searchItem = (query) => {
if (!query) {
setSearchData(data);
return;
}
query = query.toLowerCase();
const finalResult = [];
data.forEach((item) => {
if (
item.name.toLowerCase().indexOf(query) !== -1 ||
item.tags.includes(query)
) {
finalResult.push(item);
}
});
setSearchData(finalResult);
};
return (
<div>
<p className="title">Tools & Technologies</p>
<div className="search-container">
<input
type="search"
onChange={(e) => searchItem(e.target.value)}
placeholder="Search Technologies"
/>
</div>
<div className="item-container">
{searchData.map((item) => (
<Item {...item} key={item.name} />
))}
</div>
</div>
);
};
export default SettingsPage;
Sortir:
Bot fouillé:
Booty recherché:
J’ai essayé de rechercher «Booty» et «Bot», mais cela n’a montré que les résultats pour «Booty» car la méthode de comparaison de chaîne fonctionne de cette façon. Pour rendre la recherche floue, nous avons besoin d’un algorithme de comparaison de chaînes différent.
Il existe de nombreux algorithmes disponibles pour cela, et vous n’avez pas besoin de les étudier tous pour en utiliser un.
Pour transformer notre recherche en un moteur de recherche flou, nous utiliserons Fusible.js.
Fusible.js est une bibliothèque de recherche floue rapide et légère qui ne nécessite aucune dépendance.
Intégration de Fuse.js à la recherche
En faisant un petit changement, nous pouvons facilement transformer notre recherche en une recherche floue.
setting.js
Implémente la fonctionnalité de recherche floue à l’aide de fuse.js. Il permet aux utilisateurs de rechercher dans les technologies par leur nom et leurs balises. Les résultats de la recherche sont actualisés instantanément à mesure que l’utilisateur type.
import React, { useState } from "react";
import data from "./data.json";
import Fuse from "fuse.js";
import Item from "./item";
const SettingsPage = () => {
const [searchData, setSearchData] = useState(data);
const searchItem = (query) => {
if (!query) {
setSearchData(data);
return;
}
const fuse = new Fuse(data, {
keys: ["name", "tags"]
});
const result = fuse.search(query);
const finalResult = [];
if (result.length) {
result.forEach((item) => {
finalResult.push(item.item);
});
setSearchData(finalResult);
} else {
setSearchData([]);
}
};
return (
<div>
<p className="title">Tools & Technologies</p>
<div className="search-container">
<input
type="search"
onChange={(e) => searchItem(e.target.value)}
placeholder="Search Technologies"
/>
</div>
<div className="item-container">
{searchData.map((item) => (
<Item {...item} key={item.name} />
))}
</div>
</div>
);
};
export default SettingsPage;
Sortir:
Bot fouillé:
Booty recherché:
Conclusion:
Dans ce blog, nous avons exploré comment les méthodes traditionnelles de comparaison des cordes sont en deçà de la gestion des fautes d’orthographe et des inexactitudes dans les requêtes de recherche. Fuzzy Search, implémenté à l’aide de fusible.js, fournit une solution efficace en permettant une correspondance de chaîne approximative, ce qui rend l’expérience de recherche plus robuste et conviviale. En intégrant Fuse.js dans une application de réact simple, nous avons créé une fonctionnalité de recherche en temps réel qui est insensible à la casse, flexible et capable de fournir des résultats précis même pour les requêtes imparfaites. Cette bibliothèque légère change la donne pour améliorer les fonctionnalités de recherche dans les applications modernes.
Source link