[a] fuse.js for fuzzy search

This commit is contained in:
Sangelo 2024-06-12 14:05:32 +02:00
parent fa190f9b7d
commit 54070518ac
3 changed files with 37 additions and 23 deletions

View file

@ -14,6 +14,7 @@
"@sveltejs/adapter-node": "^1.2.4", "@sveltejs/adapter-node": "^1.2.4",
"@sveltejs/adapter-static": "^2.0.3", "@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.20.5", "@sveltejs/kit": "^1.20.5",
"fuse.js": "^7.0.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"sass": "^1.62.0", "sass": "^1.62.0",
"svelte": "^3.54.0", "svelte": "^3.54.0",

View file

@ -1,5 +1,6 @@
<script> <script>
import { afterUpdate, onMount } from "svelte"; import { afterUpdate, onMount } from "svelte";
import Fuse from "fuse.js"; // Import Fuse.js
import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte'; import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
import IconClose from 'svelte-material-icons/Close.svelte'; import IconClose from 'svelte-material-icons/Close.svelte';
@ -12,7 +13,7 @@
let searchQueryInput = (event) => { let searchQueryInput = (event) => {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(checkOverflow, 0); timeout = setTimeout(checkOverflow, 300); // Debounced input handling
}; };
function checkOverflow() { function checkOverflow() {
@ -35,6 +36,15 @@
const response = await fetch(`/assets/json/${file}`); const response = await fetch(`/assets/json/${file}`);
const data = await response.json(); const data = await response.json();
mods = data; mods = data;
// Create Fuse instances for fuzzy search
fuseMods = new Fuse(mods.mods, {
keys: ["name", "description"],
threshold: 0.4 // Adjust the threshold as needed
});
fuseOptionalMods = new Fuse(mods.optional_mods, {
keys: ["name", "description"],
threshold: 0.4 // Adjust the threshold as needed
});
} }
onMount(async () => { onMount(async () => {
@ -47,22 +57,23 @@
loading = false; loading = false;
}); });
function search(query, mods) { let fuseMods, fuseOptionalMods;
const regex = new RegExp(query, "i");
return mods.filter( function search(query, mods, fuse) {
(mod) => regex.test(mod.name) || regex.test(mod.description), if (!query) return mods;
); const results = fuse.search(query);
return results.map(result => result.item);
} }
function clearInput() { function clearInput() {
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(checkOverflow, 0);
searchQuery = ""; searchQuery = "";
setTimeout(checkOverflow, 300); // Debounced overflow check
} }
function handleFileChange(event) { function handleFileChange(event) {
selectedFile = event.target.value; selectedFile = event.target.value;
fetchData(selectedFile); fetchData(selectedFile).then(() => checkOverflow());
} }
afterUpdate(() => { afterUpdate(() => {
@ -70,7 +81,7 @@
removeOverflow(); removeOverflow();
checkOverflow(); checkOverflow();
loading = false; loading = false;
}) });
</script> </script>
<div class="search-container" role="group"> <div class="search-container" role="group">
@ -83,7 +94,7 @@
</select> </select>
</div> </div>
<div class="results-bar"> <div class="results-bar">
<p>Results: {search(searchQuery, mods.mods).length + search(searchQuery, mods.optional_mods).length}</p> <p>Results: {search(searchQuery, mods.mods, fuseMods).length + search(searchQuery, mods.optional_mods, fuseOptionalMods).length}</p>
<a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a> <a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a>
</div> </div>
@ -91,12 +102,12 @@
{#if loading} {#if loading}
<p>Loading...</p> <p>Loading...</p>
{:else if search(searchQuery, mods.mods).length === 0 && search(searchQuery, mods.optional_mods).length === 0} {:else if search(searchQuery, mods.mods, fuseMods).length === 0 && search(searchQuery, mods.optional_mods, fuseOptionalMods).length === 0}
<p>⚠️ No results found.</p> <p>⚠️ No results found.</p>
{:else} {:else}
<div class="grid" id="mods"> <div class="grid" id="mods">
{#each Array(Math.ceil(search(searchQuery, mods.mods).length / 3)) as _, index} {#each Array(Math.ceil(search(searchQuery, mods.mods, fuseMods).length / 3)) as _, index}
{#each search(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod} {#each search(searchQuery, mods.mods, fuseMods).slice(index * 3, (index + 1) * 3) as mod}
<a <a
role="button" role="button"
class="mod-card card contrast" class="mod-card card contrast"
@ -104,7 +115,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" /> <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
<div class="mod-card-text-ct"> <div class="mod-card-text-ct">
<p class="mod-card-name">{mod.name}</p> <p class="mod-card-name">{mod.name}</p>
<p class="mod-card-desc">{mod.description}</p> <p class="mod-card-desc">{mod.description}</p>
@ -115,11 +126,10 @@
</div> </div>
<details open> <details open>
<!-- svelte-ignore a11y-no-redundant-roles -->
<summary role="button" class="secondary">Optional Mods</summary> <summary role="button" class="secondary">Optional Mods</summary>
<div class="grid" id="optional-mods"> <div class="grid" id="optional-mods">
{#each Array(Math.ceil(search(searchQuery, mods.optional_mods).length / 3)) as _, index} {#each Array(Math.ceil(search(searchQuery, mods.optional_mods, fuseOptionalMods).length / 3)) as _, index}
{#each search(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod} {#each search(searchQuery, mods.optional_mods, fuseOptionalMods).slice(index * 3, (index + 1) * 3) as mod}
<a <a
role="button" role="button"
class="mod-card card contrast" class="mod-card card contrast"
@ -127,7 +137,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" /> <img src={mod.logo} alt={mod.name + "'s Icon"} class="mod-card-logo" loading="lazy" />
<div class="mod-card-text-ct"> <div class="mod-card-text-ct">
<p class="mod-card-name">{mod.name}</p> <p class="mod-card-name">{mod.name}</p>
<p class="mod-card-desc">{mod.description}</p> <p class="mod-card-desc">{mod.description}</p>
@ -164,7 +174,6 @@
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
// text-align: right;
p { p {
margin: 0; margin: 0;
} }
@ -180,10 +189,10 @@
.mod-card { .mod-card {
display: flex; display: flex;
justify-content: center; justify-content: center;
// align-items: center; padding: 0.5em 1em;
padding: 0.5em 1em 0.5em 1em;
max-height: 6em; max-height: 6em;
overflow: hidden; overflow: hidden;
transition: max-height 0.3s ease-in-out; // Smooth transition
img.mod-card-logo { img.mod-card-logo {
height: 4em; height: 4em;
@ -212,8 +221,6 @@
} }
:global(.overflowing) { :global(.overflowing) {
transition: max-height 0.5s ease-in-out;
max-height: 6em;
position: relative; position: relative;
&::after { &::after {
@ -226,6 +233,7 @@
right: 0em; right: 0em;
z-index: 1; z-index: 1;
transition: opacity 0.25s ease-in-out; transition: opacity 0.25s ease-in-out;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8));
} }
&:hover { &:hover {

View file

@ -430,6 +430,11 @@ function-bind@^1.1.2:
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA== integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
fuse.js@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
glob-parent@~5.1.2: glob-parent@~5.1.2:
version "5.1.2" version "5.1.2"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"