current state

static/css/dashboard.css

@@ -2,12 +2,6 @@ body {
 	font-size: 0.875rem;
 }
 
-.feather {
-	width: 16px;
-	height: 16px;
-	vertical-align: text-bottom;
-}
-
 /*
  * Sidebar
  */
@@ -98,3 +92,11 @@ body {
 	border-color: transparent;
 	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
 }
+
+.autocomplete-items {
+	position: absolute;
+	z-index: 99;
+	top: 100%;
+	left: 0;
+	right: 0;
+}

static/js/searchBox.js

@@ -1,11 +1,24 @@
 document.getElementById("SearchBox").addEventListener("keyup", handleSearchChange);
+const autocompleteBox = document.getElementById("autocomplete-items");
+autocompleteBox.style.display = "none";
 function handleSearchChange(e) {
 	console.log(e.target.value);
 	// Check if known prefix is used (either > or #)
+	if(e.target.value != "" ) {
+		autocompleteBox.style.display = "block";
+		autocompleteBox.innerHTML = "Search results will show up here soon <br> Trust me <br> Results";
+	} else {
+		autocompleteBox.style.display = "none";
+	}
+
 	if (e.target.value[0] == ">") {
-		// Search for commands
+		autocompleteBox.innerHTML = "Start typing to search for commands <br> >goto items";
+		if(e.target.value == ">goto items") {
+			autocompleteBox.innerHTML = "<a href='/allItems'>Goto Items</a>";
+		}
 	} else if (e.target.value[0] == "#") {
 		// Search for SKU
+		autocompleteBox.innerHTML = "Start typing to search for items by SKU";
 	} else {
 		// Search for name
 	}