Add basic autocomplete component

src/components/autocomplete/ByjoveAutocomplete.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <b-autocomplete ref="autocomplete"
+                    :name="name"
+                    v-show="!selected"
+                    v-model="autocompleteValue"
+                    :data="data"
+                    @typing="getAsyncData"
+                    @select="selectionMade"
+                    keep-first>
+      <template slot-scope="props">
+        {{ props.option.label }}
+      </template>
+    </b-autocomplete>
+
+    <b-button v-if="selected"
+              style="width: 100%; justify-content: left;"
+              @click="clearSelection()">
+      {{ selected.label }}
+    </b-button>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ByjoveAutocomplete',
+    props: {
+        name: String,
+        serviceUrl: String,
+        value: String,
+        initialLabel: String,
+    },
+    data() {
+        let selected = null
+        if (this.value) {
+            selected = {
+                value: this.value,
+                label: this.initialLabel,
+            }
+        }
+        return {
+            data: [],
+            selected: selected,
+            isFetching: false,
+            autocompleteValue: this.value,
+        }
+    },
+    methods: {
+
+        clearSelection() {
+            this.selected = null
+            this.$emit('input', null)
+            this.autocompleteValue = null
+            this.$nextTick(function() {
+                this.$refs.autocomplete.focus()
+            })
+        },
+
+        selectionMade(option) {
+            this.selected = option
+            this.$emit('input', option.value)
+        },
+
+        // TODO: buefy example uses `debounce()` here and perhaps we should too?
+        // https://buefy.org/documentation/autocomplete
+        getAsyncData: function (entry) {
+            if (entry.length < 3) {
+                this.data = []
+                return
+            }
+
+            this.isFetching = true
+            this.$http.get(this.serviceUrl, {params: {term: entry}}).then((response) => {
+                this.data = response.data
+            }).catch((error) => {
+                this.data = []
+                throw error
+            }).finally(() => {
+                this.isFetching = false
+            })
+        },
+    },
+
+}
+</script>

src/components/autocomplete/index.js

@@ -0,0 +1,27 @@
+import ByjoveAutocomplete from './ByjoveAutocomplete.vue'
+
+// Declare install function executed by Vue.use()
+export function install(Vue) {
+    if (install.installed) return;
+    install.installed = true;
+    Vue.component('ByjoveAutocomplete', ByjoveAutocomplete);
+}
+
+// Create module definition for Vue.use()
+const plugin = {
+    install,
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+    GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+    GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+    GlobalVue.use(plugin);
+}
+
+// To allow use as module (npm/webpack/etc.) export component
+export default ByjoveAutocomplete

src/components/index.js

@@ -2,6 +2,7 @@ import ByjoveApp from './app'
 import ByjoveMenu from './menu'
 import ByjoveLogo from './logo'
 import ByjoveFeedback from './feedback'
+import ByjoveAutocomplete from './autocomplete'
 import ByjoveModelIndex from './model-index'
 import ByjoveModelCrud from './model-crud'
 
@@ -10,6 +11,7 @@ export {
     ByjoveMenu,
     ByjoveLogo,
     ByjoveFeedback,
+    ByjoveAutocomplete,
     ByjoveModelIndex,
     ByjoveModelCrud,
 }