From a43fe216e38f369493cd46799ee1d85ddf0f9109 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Sat, 6 Jun 2020 10:35:54 +0800
Subject: [PATCH] input events and ui consistency

---
 css/search-box.css  |  6 +++---
 css/suggestions.css | 17 +++++++++++++++--
 js/auto-suggest.js  | 24 ++++++++++++++++++++----
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/css/search-box.css b/css/search-box.css
index d9a2aa3..391c755 100644
--- a/css/search-box.css
+++ b/css/search-box.css
@@ -2,7 +2,7 @@
 
 	width: 100%;
 	height: auto;
-	top: 60%;
+	top: 40%;
 
 	opacity: 0;
 	position: absolute;
@@ -45,7 +45,7 @@
 
 .showSearchBox {
 	opacity: 1 !important;
-	top: 90% !important;
+	top: 70% !important;
 	pointer-events: initial !important;
 }
 
@@ -56,7 +56,7 @@
 
 	.showSearchBox {
 		opacity: 1 !important;
-		top: 70% !important;
+		top: 65% !important;
 		pointer-events: initial !important;
 	}
 }
diff --git a/css/suggestions.css b/css/suggestions.css
index f2085e5..16d3826 100644
--- a/css/suggestions.css
+++ b/css/suggestions.css
@@ -51,8 +51,12 @@
 	height: auto;
 
 	/*Always center horizontally*/
-	display: table-cell;
-	width: auto;
+	/*display: table-cell;*/
+	/*width: auto;*/
+  	/*text-align: center;*/
+
+  	display: inline-flex;
+  	width: 100%;
   	text-align: center;
 }
 
@@ -81,4 +85,13 @@
 
 .phraseButton:active {
 	background: var(--base-active-bg);
+}
+
+@media screen and (max-width: 580px) {
+	/*The Li*/
+	#phrase {
+		display: inline-flex !important;
+		width: 100% !important;
+  		text-align: center !important;
+	}
 }
\ No newline at end of file
diff --git a/js/auto-suggest.js b/js/auto-suggest.js
index 972fe3a..24484aa 100644
--- a/js/auto-suggest.js
+++ b/js/auto-suggest.js
@@ -2,10 +2,10 @@ var searchBox = document.getElementById('searchBox');
 var suggestionsUL = document.getElementById('suggestions');
 var suggestionsContainer = document.getElementById('suggestionsContainer');
 
+// Create input events
+const phraseEvents = button => {
 
-// Update searchbox on enter key
-const phraseButtonCallback = button => {
-
+	// Update searchbox on enter key and mouse click
 	button.onkeyup = event => {
 
 		if (event.key === 'Enter') {
@@ -13,15 +13,25 @@ const phraseButtonCallback = button => {
 			searchBox.value = button.innerText;
 			searchBox.focus();
 
+		} else if (event.key === 'Backspace') {
+
+			searchBox.focus();
 		}
 
 	}
 
+	// Onmouseup event
+	button.onmouseup = event => {
+		searchBox.value = button.innerText;
+		searchBox.focus();
+	}
+
 }
 
 // Generate and parse suggestions
 const autocompleteCallback = phrase => {
 
+	// Filter/parse the object
 	var suggestion = phrase.map(i => i.phrase)
 					.filter(s => !(s.toLowerCase() === String(searchBox.value).toLowerCase()))
 					.slice(0, 4);
@@ -33,6 +43,7 @@ const autocompleteCallback = phrase => {
 	// Generate list elements
 	for (i = 0; i < (suggestion.length); i++) {
 
+		// Create html elements
 		var li = document.createElement('li');
 		li.id = 'phrase';
 
@@ -41,8 +52,12 @@ const autocompleteCallback = phrase => {
 		button.className = 'phraseButton';
 		button.innerHTML = suggestion[i];
 
-		phraseButtonCallback(button);
 
+		// Create input events
+		phraseEvents(button);
+
+
+		// Appent to ul
 		li.appendChild(button);
 		suggestionsUL.appendChild(li);
 	}
@@ -64,6 +79,7 @@ searchBox.onkeyup = event => {
 		return;
 	}
 
+	// Fetch from duckduckgo
 	var script = document.createElement('script');
 	script.type = "text/javascript";
 	script.src = "https://duckduckgo.com/ac/?callback=autocompleteCallback&q="+String(searchBox.value);