Code Refactoring

Removed multiple else if with Switch, for better readability and perfomance

components/autocomplete.vue

@@ -1,9 +1,30 @@
 <template>
   <div class="autocomplete-wrapper">
     <label>
-      <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
+      <input
-      <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
+        type="text"
-        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }" :key="index">{{ suggestion }}</li>
+        :placeholder="placeholder"
+        v-model="value"
+        @input="updateSuggestions"
+        @keyup="updateSuggestions"
+        @click="updateSuggestions"
+        @keydown="handleKeystroke"
+        ref="acInput"
+        :spellcheck="spellcheck"
+        :autocapitalize="spellcheck"
+        :autocorrect="spellcheck"
+      />
+      <ul
+        class="suggestions"
+        v-if="suggestions.length > 0 && suggestionsVisible"
+        :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
+      >
+        <li
+          v-for="(suggestion, index) in suggestions"
+          @click.prevent="forceSuggestion(suggestion)"
+          :class="{ active: currentSuggestionIndex === index }"
+          :key="index"
+        >{{ suggestion }}</li>
       </ul>
     </label>
   </div>
@@ -52,7 +73,6 @@
     }
   }
 }
-
 </style>
 
 <script>
@@ -72,7 +92,7 @@
 
     placeholder: {
       type: String,
-        default: 'Start typing...',
+      default: "Start typing...",
       required: false
     },
 
@@ -84,7 +104,7 @@
 
   watch: {
     value() {
-        this.$emit('input', this.value);
+      this.$emit("input", this.value);
     }
   },
 
@@ -95,7 +115,7 @@
       suggestionsOffsetLeft: 0,
       currentSuggestionIndex: -1,
       suggestionsVisible: false
-      }
+    };
   },
 
   methods: {
@@ -111,7 +131,7 @@
       // As suggestions is a reactive property, this implicitly
       // causes suggestions to update.
       this.selectionStart = this.$refs.acInput.selectionStart;
-        this.suggestionsOffsetLeft = (12 * this.selectionStart);
+      this.suggestionsOffsetLeft = 12 * this.selectionStart;
       this.suggestionsVisible = true;
     },
 
@@ -125,28 +145,30 @@
     },
 
     handleKeystroke(event) {
-        if (event.which === KEY_ARROW_UP) {
+      switch (event.which) {
+
+        case KEY_ARROW_UP:
           event.preventDefault();
+          this.currentSuggestionIndex =this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0;
+          break;
 
-          this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
+        case KEY_ARROW_DOWN:
-            this.currentSuggestionIndex - 1 :
-            0;
-        } else if (event.which === KEY_ARROW_DOWN) {
           event.preventDefault();
+          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1  ? this.currentSuggestionIndex + 1
+              : this.suggestions.length - 1;
+          break;
 
-          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
+        case KEY_TAB:
-            this.currentSuggestionIndex + 1 :
-            this.suggestions.length - 1;
-        }
-
-        if (event.which === KEY_TAB) {
           event.preventDefault();
-
           let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
           if (activeSuggestion) {
             let input = this.value.substring(0, this.selectionStart);
             this.value = input + activeSuggestion;
           }
+          break;
+
+        default:
+          break;
       }
     }
   },
@@ -160,14 +182,19 @@
     suggestions() {
       let input = this.value.substring(0, this.selectionStart);
 
-        return this.source.filter((entry) => {
+      return (
-            return entry.toLowerCase().startsWith(input.toLowerCase()) &&
+        this.source
-              input.toLowerCase() !== entry.toLowerCase();
+          .filter(entry => {
+            return (
+              entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase()
+            );
           })
           // Cut off the part that's already been typed.
-          .map((entry) => entry.substring(this.selectionStart))
+          .map(entry => entry.substring(this.selectionStart))
           // We only want the top 3 suggestions.
-          .slice(0, 3);
+          .slice(0, 3)
+      );
     }
   },
 
@@ -176,6 +203,5 @@
       target: this.$refs.acInput
     });
   }
-  }
+};
-
 </script>