Projects Dropdown Search Input Component

app/assets/javascripts/projects_dropdown/components/search.vue

+<script>
+import _ from 'underscore';
+import eventHub from '../event_hub';
+
+export default {
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  watch: {
+    searchQuery() {
+      this.handleInput();
+    },
+  },
+  methods: {
+    setFocus() {
+      this.$refs.search.focus();
+    },
+    emitSearchEvents() {
+      if (this.searchQuery) {
+        eventHub.$emit('searchProjects', this.searchQuery);
+      } else {
+        eventHub.$emit('searchCleared');
+      }
+    },
+    /**
+     * Callback function within _.debounce is intentionally
+     * kept as ES5 `function() {}` instead of ES6 `() => {}`
+     * as it otherwise messes up function context
+     * and component reference is no longer accessible via `this`
+     */
+    // eslint-disable-next-line func-names
+    handleInput: _.debounce(function () {
+      this.emitSearchEvents();
+    }, 500),
+  },
+  mounted() {
+    eventHub.$on('dropdownOpen', this.setFocus);
+  },
+  beforeDestroy() {
+    eventHub.$off('dropdownOpen', this.setFocus);
+  },
+};
+</script>
+
+<template>
+  <div
+    class="search-input-container hidden-xs"
+  >
+    <input
+      type="search"
+      class="form-control"
+      ref="search"
+      v-model="searchQuery"
+      :placeholder="s__('ProjectsDropdown|Search projects')"
+    />
+    <i
+      v-if="!searchQuery"
+      class="search-icon fa fa-fw fa-search"
+      aria-hidden="true"
+    />
+  </div>
+</template>