From a616d903fb13073c1bf1a2d07bb620161a613c4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Mart=C3=ADnez=20Portela?=
 <sergio@codigoparallevar.com>
Date: Tue, 4 Oct 2022 23:55:57 +0200
Subject: [PATCH] Implement basic popup creation for note search.

---
 static/search-box.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/static/search-box.js b/static/search-box.js
index fe2e056..96c2177 100644
--- a/static/search-box.js
+++ b/static/search-box.js
@@ -10,9 +10,31 @@ function _codigoparallevar_enable_search_box(selector, options) {
     const resultsBox = document.createElement('div');
     resultsBox.setAttribute('class', 'results-box');
 
+    // Results box contents
+    const innerSearchBox = document.createElement('input');
+    innerSearchBox.setAttribute('type', 'text');
+    innerSearchBox.setAttribute('placeholder', element.getAttribute('placeholder'));
+    resultsBox.appendChild(innerSearchBox);
+
+    const resultsList = document.createElement('ul');
+    resultsBox.appendChild(resultsList);
+
     resultsBoxBackdrop.appendChild(resultsBox);
     document.body.appendChild(resultsBoxBackdrop);
 
+    // Popup cancellation
+    resultsBoxBackdrop.onclick = () => {
+        resultsBoxBackdrop.classList.add('hidden');
+    };
+    resultsBox.onclick = (ev) => {
+        ev.stopPropagation();
+    };
+
+    // Element triggers popup
+    element.onfocus = () => {
+        resultsBoxBackdrop.classList.remove('hidden');
+        innerSearchBox.focus();
+    };
 
     const DEBOUNCE_TIME = 500; // Milliseconds
     const MIN_LENGTH = 3;
@@ -23,7 +45,7 @@ function _codigoparallevar_enable_search_box(selector, options) {
 
     let lastVal = null;
     const doQuery = () => {
-        const val = element.value.trim();
+        const val = innerSearchBox.value.trim();
         if ((val.length < MIN_LENGTH) || (val === lastVal)) {
             return;
         }
@@ -45,11 +67,11 @@ function _codigoparallevar_enable_search_box(selector, options) {
     };
     element.removeAttribute('disabled');
 
-    element.onkeyup = (ev) => {
+    innerSearchBox.onkeyup = (ev) => {
         if (debounceWaiter !== null) {
             clearTimeout(debounceWaiter);
         }
         debounceWaiter = setTimeout(doQuery, DEBOUNCE_TIME);
-
     };
 }
+