Adds search hints / suggestions while typing

resources/cider-ui-tests/index.js

@@ -61,6 +61,8 @@ const app = new Vue({
         quickPlayQuery: "",
         search: {
             term: "",
+            hints: [],
+            showHints: false,
             results: {},
             limit: 10
         },
@@ -302,6 +304,13 @@ const app = new Vue({
                 'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
             }
         },
+        async getSearchHints() {
+            if(this.search.term == "") {
+                this.search.hints = ""
+            }
+            let hints = await app.mkapi("searchHints", false, this.search.term)
+            this.search.hints = hints.terms
+        },
         getSongProgress() {
             if(this.playerLCD.userInteraction) {
                 return this.playerLCD.desiredDuration

resources/cider-ui-tests/style.less

@@ -188,6 +188,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   display: flex;
   flex-direction: column;
   flex: 0 0 auto;
+  position: relative;
 }
 
 #app-navbar {
@@ -354,6 +355,39 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 100%;
 }
 
+.search-hints-container {
+  position: absolute;
+  top: 44px;
+  width: 100%;
+  padding: 10px;
+  z-index: 1;
+  .search-hints {
+    background: #242424;
+    padding: 6px;
+    border-radius: 6px;
+    width: 100%;
+    box-shadow: var(--mediaItemShadow-Shadow);
+    .search-hint {
+      background: transparent;
+      display: block;
+      width: 100%;
+      text-align: left;
+      color: #eee;
+      font-family: inherit;
+      font-size: 15px;
+      padding: 8px 12px;
+      border: 0px;
+      appearance: none;
+      border-radius: 6px;
+      margin: 2px 0px;
+      &:hover {
+        background: var(--keyColor);
+      }
+    }
+  }
+}
+
+
 .app-sidebar-content::-webkit-scrollbar {
   display: none;
 }

resources/cider-ui-tests/views/main.ejs

@@ -124,10 +124,19 @@
                     <div class="search-input-container">
                         <div class="search-input--icon"></div>
                         <input type="search" spellcheck="false" @click="showSearch()"
-                               @change="showSearch();searchQuery()" placeholder="Search..." v-model="search.term"
+                               @focus="search.showHints = true"
+                               @blur="setTimeout(()=>{search.showHints = false}, 100)"
+                               @change="showSearch();searchQuery()" @input="getSearchHints()" placeholder="Search..." v-model="search.term"
                                class="search-input">
                     </div>
                 </div>
+                <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
+                <div class="search-hints">
+                    <button class="search-hint" v-for="hint in search.hints" @click="search.term = hint;search.showHints = false;searchQuery()">
+                        {{ hint }}
+                    </button>
+                </div>
+                </div>
                 <div class="app-sidebar-content">
                     <div class="app-sidebar-header-text">
                         Apple Music