From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 22 Feb 2022 15:25:03 +0000 (+0100)
Subject: wip #5120
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e5fec4c78c00a6aed46b2b39f18497c058c3f515;p=odl.git

wip #5120
---

diff --git a/resources/js/search.js b/resources/js/search.js
index 328d2cc..430fc98 100644
--- a/resources/js/search.js
+++ b/resources/js/search.js
@@ -14,7 +14,9 @@ export default () => ({
             prefix: true, // Allow partial matches
             processTerm: (term, _fieldName) => term.length < 3 ? null : term.toLowerCase()
         },
-    }, query: '', // The search query
+    },
+    querystring: '', // The search query
+    query: '', // The search query
     medialibrary: '', // Holds URL of the media library that is passed in from the component
 
     async init() {
@@ -54,8 +56,6 @@ export default () => ({
             return [];
         }
 
-        console.log(this.query);
-
         return this.miniSearch.search(this.query);
     },
 
diff --git a/resources/views/components/search.blade.php b/resources/views/components/search.blade.php
index 86db3bf..e968a55 100644
--- a/resources/views/components/search.blade.php
+++ b/resources/views/components/search.blade.php
@@ -42,7 +42,8 @@
                 type="search"
                 placeholder="Recherche"
                 @keyup.enter="$el.blur()" {{-- Remove focus on enter in order to hide virtual keyboard --}}
-                x-model="query"
+                x-on:change="query=querystring"
+                x-model="querystring"
                 class="appearance-none outline-none bg-white
                        mt-8 w-full
                        font-semibold text-6xl uppercase
@@ -60,10 +61,10 @@
 
     {{-- Search Results --}}
     <div class="flex-1 max-h-full w-full overflow-y-auto"
-         x-show="showResults"
+         x-show="searchOpen"
          x-transition:enter.opacity.duration.500ms.delay.1500ms
          x-transition:leave.opacity.delay.50ms>
-        <div class="font-secondary font-medium">
+        <div x-show="query !== ''" class="font-secondary font-medium">
             <p x-text="resultCount" class="mt-15 opacity-50"></p>
 
             <div class="h-full max-h-full overflow-y-auto">