New rolling animation for search result elements.

src/components/AutocompleteDropdown.vue

@@ -3,6 +3,7 @@
     <ul class="dropdown">
       <li
         v-for="result in searchResults"
+        :key="`${result.index}-${result.title}-${result.type}`"
         @click="openPopup(result)"
         :class="`result di-${result.index} ${
           result.index === index ? 'active' : ''
@@ -10,7 +11,14 @@
       >
         <IconMovie v-if="result.type == 'movie'" class="type-icon" />
         <IconShow v-if="result.type == 'show'" class="type-icon" />
-        <span>{{ result.title }}</span>
+        <span class="title">{{ result.title }}</span>
+      </li>
+
+      <li
+        v-if="searchResults.length"
+        :class="`info di-${searchResults.length}`"
+      >
+        <span> Select from list or press enter to search </span>
       </li>
     </ul>
   </transition>
@@ -50,7 +58,8 @@ export default {
   data() {
     return {
       searchResults: [],
-      keyboardNavigationIndex: 0
+      keyboardNavigationIndex: 0,
+      numberOfResults: 10
     };
   },
   methods: {
@@ -61,33 +70,37 @@ export default {
     },
     fetchAutocompleteResults() {
       this.keyboardNavigationIndex = 0;
+      this.searchResults = [];
 
-      elasticSearchMoviesAndShows(this.query).then(resp => {
+      elasticSearchMoviesAndShows(this.query, this.numberOfResults).then(
-        const data = resp.hits.hits;
+        resp => {
+          const data = resp.hits.hits;
 
-        let results = data.map(item => {
+          let results = data.map(item => {
-          let index = null;
+            let index = null;
-          if (item._source.log.file.path.includes("movie")) index = "movie";
+            if (item._source.log.file.path.includes("movie")) index = "movie";
-          if (item._source.log.file.path.includes("series")) index = "show";
+            if (item._source.log.file.path.includes("series")) index = "show";
 
-          if (index === "movie" || index === "show") {
+            if (index === "movie" || index === "show") {
-            return {
+              return {
-              title: item._source.original_name || item._source.original_title,
+                title:
-              id: item._source.id,
+                  item._source.original_name || item._source.original_title,
-              adult: item._source.adult,
+                id: item._source.id,
-              type: index
+                adult: item._source.adult,
-            };
+                type: index
-          }
+              };
-        });
+            }
+          });
 
-        results = this.removeDuplicates(results);
+          results = this.removeDuplicates(results);
-        results = results.map((el, index) => {
+          results = results.map((el, index) => {
-          return { ...el, index };
+            return { ...el, index };
-        });
+          });
 
-        this.$emit("update:results", results);
+          this.$emit("update:results", results);
-        this.searchResults = results.slice(0, 10);
+          this.searchResults = results;
-      });
+        }
+      );
     },
     removeDuplicates(searchResults) {
       let filteredResults = [];
@@ -112,7 +125,7 @@ export default {
     }
   },
   created() {
-    this.fetchAutocompleteResults();
+    if (this.query) this.fetchAutocompleteResults();
   }
 };
 </script>
@@ -179,14 +192,17 @@ $sizes: 22;
 }
 
 li.result {
+  background-color: var(--background-95);
+  color: var(--text-color-50);
+  padding: 0.5rem 2rem;
+  list-style: none;
+
   opacity: 0;
   height: 56px;
   width: 100%;
   visibility: hidden;
   display: flex;
   align-items: center;
-  background-color: var(--background-95);
-  color: var(--text-color-50);
   padding: 0.5rem 2rem;
 
   font-size: 1.4rem;
@@ -195,7 +211,7 @@ li.result {
   cursor: pointer;
   white-space: nowrap;
 
-  transition: color 0.1s ease, stroke 0.4s ease;
+  transition: color 0.1s ease, fill 0.4s ease;
 
   span {
     overflow-x: hidden;
@@ -211,17 +227,33 @@ li.result {
     border-bottom: 2px solid var(--color-green);
 
     .type-icon {
-      stroke: var(--text-color);
+      fill: var(--text-color);
     }
   }
 
   .type-icon {
+    width: 28px;
+    height: 28px;
     margin-right: 1rem;
     transition: inherit;
-    stroke: var(--text-color-50);
+    fill: var(--text-color-50);
   }
 }
 
+li.info {
+  visibility: hidden;
+  opacity: 0;
+  display: flex;
+  justify-content: center;
+  padding: 0 1rem;
+  color: var(--text-color-50);
+  background-color: var(--background-95);
+  color: var(--text-color-50);
+  font-size: 0.6rem;
+  height: 16px;
+  width: 100%;
+}
+
 .shut-leave-to {
   height: 0px;
   transition: height 0.4s ease;

src/components/SearchInput.vue

@@ -13,7 +13,7 @@
         tabindex="0"
         v-model="query"
         @input="handleInput"
-        @click="focus = true"
+        @click="focusingInput = true"
         @keydown.escape="handleEscape"
         @keyup.enter="handleSubmit"
         @keydown.up="navigateUp"
@@ -177,7 +177,8 @@ export default {
 .fade-leave-active {
   transition: opacity 0.2s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
@@ -215,12 +216,14 @@ hr {
 }
 
 .search.active {
+  transition: border-color 0.3s ease, fill 0.3s ease;
+
   input {
     border-color: var(--color-green);
   }
 
   .search-icon {
-    stroke: var(--color-green);
+    fill: var(--color-green);
   }
 }
 
@@ -255,10 +258,11 @@ hr {
     font-weight: 300;
     font-size: 18px;
     color: $text-color;
-    // border-bottom: 1px solid transparent;
+    border-bottom: 1px solid transparent;
 
     &:focus {
-      border-color: var(--text-color);
+      // border-bottom: 1px solid var(--color-green);
+      border-color: var(--color-green);
     }
 
     @include tablet-min {
@@ -270,8 +274,7 @@ hr {
   &-icon {
     width: 20px;
     height: 20px;
-    stroke: var(--text-color-50);
+    fill: var(--text-color-50);
-    transition: stroke 0.5s ease;
     pointer-events: none;
     position: absolute;
     left: 15px;