From ee6a3ba499b6afb62e283dc26302bab893fda458 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 8 Dec 2021 23:20:33 -0800
Subject: [PATCH] Adds search hints / suggestions while typing

---
 resources/cider-ui-tests/index.js       |  9 +++++++
 resources/cider-ui-tests/style.less     | 34 +++++++++++++++++++++++++
 resources/cider-ui-tests/views/main.ejs | 11 +++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 7e481ab7..03ba2a98 100644
--- a/resources/cider-ui-tests/index.js
+++ b/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
diff --git a/resources/cider-ui-tests/style.less b/resources/cider-ui-tests/style.less
index 8a252b37..b3f3d1fe 100644
--- a/resources/cider-ui-tests/style.less
+++ b/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;
 }
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 1bfbecad..c5f92d80 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/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