wip search

src/App.vue

@@ -3,8 +3,13 @@
         <Menu style="flexShrink: 0" />
         <main
             class="uk-container uk-container-expand"
-            style="height: 100vh; overflow: scroll; flex: 1;"
+            style="overflow-y: scroll; overflow-x: hidden; flex: 1;"
-            :style="{ background: backgroundColor, colour: foregroundColor, marginTop: isMobile ? '70px' : 0 }"
+            :style="{
+                background: backgroundColor,
+                colour: foregroundColor,
+                marginTop: isMobile ? '70px' : 0,
+                height: isMobile ? 'calc(100vh - 70px)' : '100vh',
+            }"
             :class="{ 'uk-light': darkMode }"
         >
             <router-view v-slot="{ Component }">

src/components/TrendingPage.vue

@@ -18,8 +18,14 @@
                     class="uk-search-input"
                     style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
                     :style="{ backgroundColor: secondaryBackgroundColor }"
-                    type="search"
+                    v-model="searchText"
+                    type="text"
+                    role="search"
+                    :title="$t('actions.search')"
                     :placeholder="$t('actions.search')"
+                    @keyup="onKeyUp"
+                    @focus="onInputFocus"
+                    @blur="onInputBlur"
                 />
                 <font-awesome-icon
                     icon="search"
@@ -28,6 +34,12 @@
                 />
             </div>
         </form>
+        <SearchSuggestions
+            v-show="searchText && suggestionsVisible"
+            ref="searchSuggestions"
+            :search-text="searchText"
+            @searchchange="onSearchTextChange"
+        />
 
         <div
             v-if="!isMobile"
@@ -54,11 +66,13 @@
 
 <script>
 import VideoItem from "@/components/VideoItem.vue";
+import SearchSuggestions from "@/components/SearchSuggestions";
 
 import { useIsMobile } from "../store";
 
 export default {
     components: {
+        SearchSuggestions,
         VideoItem,
     },
     props: {
@@ -71,8 +85,11 @@ export default {
     data() {
         return {
             videos: [],
+            searchText: "",
+            suggestionsVisible: false,
         };
     },
+
     mounted() {
         let region = this.getPreferenceString("region", "US");
 
@@ -91,6 +108,29 @@ export default {
                 region: region || "US",
             });
         },
+
+        onKeyUp(e) {
+            if (e.key === "Enter") {
+                e.target.blur();
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText },
+                });
+                return;
+            } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+            }
+            this.$refs.searchSuggestions.onKeyUp(e);
+        },
+        onInputFocus() {
+            this.suggestionsVisible = true;
+        },
+        onInputBlur() {
+            this.suggestionsVisible = false;
+        },
+        onSearchTextChange(searchText) {
+            this.searchText = searchText;
+        },
     },
 };
 </script>