Merge pull request #182 from maximehuran/feature/search-js-on-focus

Call search on focus if input not empty and search not called yet
monsieurbiz · Aug 16, 2023 · ecd1f1d · ecd1f1d
2 parents 65c8bf4 + cb5a4e3
commit ecd1f1d
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -7,30 +7,20 @@ global.MonsieurBizInstantSearch = class {
         keyUpTimeOut,
         minQueryLength
     ) {
+        let self = this;
         // Init a timeout variable to be used below
         var instantSearchTimeout = null;
         const searchInput = document.querySelector(searchInputSelector);
         if (!searchInput) {
             return;
         }
+        self.searchCalled = false;
         searchInput.addEventListener('keyup', function (e) {
             clearTimeout(instantSearchTimeout);
             var query = e.currentTarget.value;
             var resultElement = e.currentTarget.closest(resultClosestSelector).querySelector(resultFindSelector);
             instantSearchTimeout = setTimeout(function () {
-                if (query.length >= minQueryLength) {
-                    var httpRequest = new XMLHttpRequest();
-                    httpRequest.onload = function () {
-                        if (this.status === 200) {
-                            resultElement.innerHTML = this.responseText;
-                            resultElement.style.display = 'block';
-                        }
-                    };
-                    httpRequest.open("POST", instantUrl);
-                    httpRequest.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-                    httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-                    httpRequest.send(new URLSearchParams({query: query}).toString());
-                }
+                self.callSearch(query, minQueryLength, instantUrl, resultElement);
             }, keyUpTimeOut);
         });
 
@@ -45,12 +35,32 @@ global.MonsieurBizInstantSearch = class {
 
         searchInput.addEventListener('focus', function (e) {
             var query = e.currentTarget.value;
-            if (query !== '') {
+            if (query !== '' && !self.searchCalled) {
+                const resultElement = searchForm.querySelector(resultFindSelector);
+                self.callSearch(query, minQueryLength, instantUrl, resultElement);
+                self.searchCalled = true;
+            } else if (query !== '') {
                 const resultElement = searchForm.querySelector(resultFindSelector);
                 resultElement.style.display = 'block';
             }
         });
     }
+
+    callSearch (query, minQueryLength, instantUrl, resultElement) {
+        if (query.length >= minQueryLength) {
+            var httpRequest = new XMLHttpRequest();
+            httpRequest.onload = function () {
+                if (this.status === 200) {
+                    resultElement.innerHTML = this.responseText;
+                    resultElement.style.display = 'block';
+                }
+            };
+            httpRequest.open("POST", instantUrl);
+            httpRequest.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+            httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            httpRequest.send(new URLSearchParams({ query: query }).toString());
+        }
+    }
 }
 
 document.addEventListener("DOMContentLoaded", function() {

diff --git a/src/Resources/public/entrypoints.json b/src/Resources/public/entrypoints.json
@@ -2,7 +2,7 @@
   "entrypoints": {
     "monsieurbiz-search": {
       "js": [
-        "/bundles/monsieurbizsyliussearchplugin/js/monsieurbiz-search.d29ecf2c.js"
+        "/bundles/monsieurbizsyliussearchplugin/js/monsieurbiz-search.bd704c68.js"
       ]
     }
   }

diff --git a/src/Resources/public/js/monsieurbiz-search.bd704c68.js b/src/Resources/public/js/monsieurbiz-search.bd704c68.js
diff --git a/src/Resources/public/js/monsieurbiz-search.d29ecf2c.js b/src/Resources/public/js/monsieurbiz-search.d29ecf2c.js
diff --git a/src/Resources/public/manifest.json b/src/Resources/public/manifest.json
@@ -1,3 +1,3 @@
 {
-  "bundles/monsieurbizsyliussearchplugin/monsieurbiz-search.js": "/bundles/monsieurbizsyliussearchplugin/js/monsieurbiz-search.d29ecf2c.js"
+  "bundles/monsieurbizsyliussearchplugin/monsieurbiz-search.js": "/bundles/monsieurbizsyliussearchplugin/js/monsieurbiz-search.bd704c68.js"
 }