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,8 +70,10 @@ export default {
     },
     fetchAutocompleteResults() {
       this.keyboardNavigationIndex = 0;
+      this.searchResults = [];
 
-      elasticSearchMoviesAndShows(this.query).then(resp => {
+      elasticSearchMoviesAndShows(this.query, this.numberOfResults).then(
+        resp => {
           const data = resp.hits.hits;
 
           let results = data.map(item => {
@@ -72,7 +83,8 @@ export default {
 
             if (index === "movie" || index === "show") {
               return {
-              title: item._source.original_name || item._source.original_title,
+                title:
+                  item._source.original_name || item._source.original_title,
                 id: item._source.id,
                 adult: item._source.adult,
                 type: index
@@ -86,8 +98,9 @@ export default {
           });
 
           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);
-    transition: stroke 0.5s ease;
+    fill: var(--text-color-50);
     pointer-events: none;
     position: absolute;
     left: 15px;