From 50955f7b1e9630abffc6b99df31a037598313971 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 22 Feb 2022 17:37:15 +0100
Subject: [PATCH] wip #5120

---
 resources/js/search.js                      | 38 +++++++++++----------
 resources/views/components/search.blade.php |  3 +-
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/resources/js/search.js b/resources/js/search.js
index ffc4bad..d97645b 100644
--- a/resources/js/search.js
+++ b/resources/js/search.js
@@ -11,13 +11,11 @@ export default () => ({
         fields: ['title', 'text', 'keywords'], // fields to index for full-text search
         storeFields: ['id', 'title', 'text', 'type', 'url', 'thumb'], // fields to return with search results
         searchOptions: {
-            prefix: false, // Allow partial matches
-            //processTerm: (term, _fieldName) => term.length < 3 ? null : term.toLowerCase()
+            prefix: true, // Allow partial matches
+            processTerm: (term, _fieldName) => term.length < 3 ? null : term.toLowerCase()
         },
-    }, querystring: '', // The search query
+    },
     query: '', // The search query
-    results:[],
-    resultCount:0,
     medialibrary: '', // Holds URL of the media library that is passed in from the component
 
     async init() {
@@ -27,7 +25,7 @@ export default () => ({
         // Delay miniSearch initialisation so there's less chance of animations stuttering during page loads
         setTimeout(() => {
             this.miniSearch = new MiniSearch(this.setup);
-            this.miniSearch.addAll(minisearchodl);
+            this.miniSearch.addAllAsync(minisearchodl);
         }, 4000);
 
         this.medialibrary = this.$el.dataset.medialibrary;
@@ -52,19 +50,23 @@ export default () => ({
         return `<a href="${URL}" class="${classes}" ${attributes}>${result.title}</a>`;
     },
 
-    doSearch() {
-        this.query = this.querystring;
-        this.results = [];
-        if (this.query.length >= 3) {
-            this.results = this.miniSearch.search(this.query);
-            if (this.results.length === 1) {
-                this.resultCount = '1 résultat'
-            } else {
-                this.resultCount = this.results.length + ' résultats';
-            }
-        } else {
-            this.resultCount = "Veuillez taper au moins 3 caractères";
+    get results() {
+        if (this.query.length < 3) {
+            return [];
         }
+
+        return this.miniSearch.search(this.query);
+    },
+
+    get resultCount() {
+        if (this.query.length < 3) {
+            return "Veuillez taper au moins 3 caractères";
+        }
+        if (this.results.length === 1) {
+            return '1 résultat'
+        }
+
+        return `${this.results.length} résultats`;
     },
 
 });
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index da8c738..bffa838 100644
--- a/resources/views/components/search.blade.php
+++ b/resources/views/components/search.blade.php
@@ -42,8 +42,7 @@
                 type="search"
                 placeholder="Recherche"
                 @keyup.enter="$el.blur()" {{-- Remove focus on enter in order to hide virtual keyboard --}}
-                @change="doSearch"
-                x-model="querystring"
+                x-model="query"
                 class="appearance-none outline-none bg-white
                        mt-8 w-full
                        font-semibold text-6xl uppercase
-- 
2.39.5