diff --git a/src/components/autocomplete/ByjoveAutocomplete.vue b/src/components/autocomplete/ByjoveAutocomplete.vue
index e187f56..636f114 100644
--- a/src/components/autocomplete/ByjoveAutocomplete.vue
+++ b/src/components/autocomplete/ByjoveAutocomplete.vue
@@ -5,13 +5,15 @@
                     v-show="!selected"
                     v-model="autocompleteValue"
                     :placeholder="placeholder"
+                    field="label"
                     :icon="icon"
-                    :data="data"
+                    :data="autocompleteData"
                     @typing="getAsyncData"
                     @select="selectionMade"
+                    :open-on-focus="openOnFocus"
                     keep-first>
-      <template slot-scope="props">
-        {{ props.option.label }}
+      <template #header>
+        <slot name="header"></slot>
       </template>
     </b-autocomplete>
 
@@ -28,7 +30,18 @@ export default {
     name: 'ByjoveAutocomplete',
     props: {
         name: String,
-        serviceUrl: String,
+        serviceUrl: {
+            type: String,
+            default: null,
+        },
+        data: {
+            type: Array,
+            default: null,
+        },
+        dataFilter: {
+            type: Function,
+            default: null,
+        },
         value: String,
         initialLabel: String,
         placeholder: {
@@ -39,7 +52,12 @@ export default {
             type: String,
             default: null,
         },
+        openOnFocus: {
+            type: Boolean,
+            default: false,
+        },
     },
+
     data() {
         let selected = null
         if (this.value) {
@@ -49,12 +67,30 @@ export default {
             }
         }
         return {
-            data: [],
+            fetchedData: [],
             selected: selected,
             isFetching: false,
             autocompleteValue: this.value,
         }
     },
+
+    computed: {
+
+        autocompleteData() {
+            return this.serviceUrl ? this.fetchedData : this.filteredData
+        },
+
+        filteredData() {
+            if (this.dataFilter) {
+                return this.data.filter((option) => {
+                    return this.dataFilter(this.autocompleteValue, option)
+                })
+            } else {
+                return this.data
+            }
+        },
+    },
+
     methods: {
 
         clearSelection() {
@@ -66,6 +102,13 @@ export default {
             })
         },
 
+        // TODO: i am not clear yet what the best pattern is for setting
+        // the selected option.  this does not seem complete but did the
+        // trick for what i needed atm..?
+        setSelected(option) {
+            this.selected = option
+        },
+
         selectionMade(option) {
             this.selected = option
             this.$emit('input', option ? option.value : null)
@@ -74,16 +117,22 @@ export default {
         // TODO: buefy example uses `debounce()` here and perhaps we should too?
         // https://buefy.org/documentation/autocomplete
         getAsyncData: function (entry) {
+
+            // we only fetch async data via URL if we have one!
+            if (!this.serviceUrl) {
+                return
+            }
+
             if (entry.length < 3) {
-                this.data = []
+                this.fetchedData = []
                 return
             }
 
             this.isFetching = true
             this.$http.get(this.serviceUrl, {params: {term: entry}}).then((response) => {
-                this.data = response.data
+                this.fetchedData = response.data
             }).catch((error) => {
-                this.data = []
+                this.fetchedData = []
                 throw error
             }).finally(() => {
                 this.isFetching = false