Ignore diacritics in search

[mgrabovsky]

The search function should ignore diacritics in queries. For example, the results for “přírodní” and “prirodni” should be the same.

According to the discussion in a Fuse.js issue, it should be fairly straightforward.

[mgrabovsky]

OK, this might be a bit more involved than I anticipated.

The obvious approach (see quick and dirty patch below) makes the diacritics disappear for matching items in the search box as well. It looks like an intervention in the upstream might be necessary to make this work properly.

diff --git a/assets/js/search.js b/assets/js/search.js
index 079df9a..959a599 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -1,6 +1,11 @@
 ---
 # Adding empty front matter to get access to Jekyll variables.
 ---
+// Code by Mathieu TUDISCO via GitHub:
+// https://github.com/krisk/Fuse/issues/415#issuecomment-634348136
+const stripAccents = String.prototype.normalize
+    ? ((str) => str.normalize('NFD').replace(/[\u0300-\u036F]/g, ''))
+    : ((str) => str);
 
 class Search {
     constructor() {
@@ -44,6 +49,10 @@ class Search {
             down: 40,
         });
 
+        const noAccentsGetter = (obj, _path) => (
+            stripAccents(Fuse.config.getFn(obj, _path))
+        );
+
         // Options for the fuse library.
         this.fuseOptions = Object.freeze({
             shouldSort: true,
@@ -51,6 +60,7 @@ class Search {
             ignoreLocation: true,
             maxPatternLength: 32,
             minMatchCharLength: 2,
+            getFn: noAccentsGetter,
             includeMatches: true,
             includeScore: true,
             keys: [
@@ -195,7 +205,7 @@ class Search {
             this.searchString = newSearchString;
             let searchResultsHtml = '';
             if (this.searchString.length > 1) {
-                let searchResults = this.fuse.search(this.searchString);
+                let searchResults = this.fuse.search(stripAccents(this.searchString));
                 searchResultsHtml = searchResults.length ? 
                                         this.getResultsHtml(searchResults) : 
                                         this.getEmptyResultsHtml('{{ site.data.lang.navigation.search.empty }}');