cleanup

css/suggestions.css

@@ -8,6 +8,9 @@
 	display: table;
 	margin: 0 auto;
 
+	opacity: 0;
+	transition: opacity var(--transition-speed);
+
 	/*Disable user touch/select on text elements*/
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -17,6 +20,10 @@
 	user-select: none;
 }
 
+.suggestionsShow {
+	opacity: 1 !important;
+}
+
 /*The UL*/
 #suggestions {
 	
@@ -39,15 +46,13 @@
 /*The Li*/
 #phrase {
 	/*Align list horizontally*/
-  	display: inline-block;
 	justify-content: center;
 
-	width: auto;
 	height: auto;
 
 	/*Always center horizontally*/
 	display: table-cell;
-  	width: auto;
+	width: auto;
   	text-align: center;
 }
 

js/auto-suggest.js

@@ -1,22 +1,37 @@
 var searchBox = document.getElementById('searchBox');
 var suggestionsUL = document.getElementById('suggestions');
+var suggestionsContainer = document.getElementById('suggestionsContainer');
 
+
+// Update searchbox on enter key
+const phraseButtonCallback = button => {
+
+	button.onkeyup = event => {
+
+		if (event.key === 'Enter') {
+
+			searchBox.value = button.innerText;
+			searchBox.focus();
+
+		}
+
+	}
+
+}
+
+// Generate and parse suggestions
 const autocompleteCallback = phrase => {
 
-
 	var suggestion = phrase.map(i => i.phrase)
 					.filter(s => !(s.toLowerCase() === String(searchBox.value).toLowerCase()))
 					.slice(0, 4);
 
-
-	// Empty ul on every callback
+	// Empty ul on every callback to refresh list
 	suggestionsUL.innerHTML = '';
-	// console.log(suggestion);
 
 
-	for (i=0; i<(suggestion.length); i++) {
-
-		// console.log(suggestion[i]);
+	// Generate list elements
+	for (i = 0; i < (suggestion.length); i++) {
 
 		var li = document.createElement('li');
 		li.id = 'phrase';
@@ -24,25 +39,28 @@ const autocompleteCallback = phrase => {
 		var button = document.createElement('button');
 		button.type = 'button';
 		button.className = 'phraseButton';
-
-
 		button.innerHTML = suggestion[i];
 
+		phraseButtonCallback(button);
 
 		li.appendChild(button);
 		suggestionsUL.appendChild(li);
-
-
 	}
 
-
-
+	// Show suggestions
+	suggestionsContainer.classList.add('suggestionsShow');
 }
 
+// Update every keyup
+searchBox.onkeyup = event => {
 
-searchBox.onkeydown = () => {
+	if (event.key === 'Tab') return;
 
 	if (searchBox.value < 1) {
+		
+		// Hide suggestions
+		suggestionsContainer.classList.remove('suggestionsShow');
+
 		return;
 	}