akkoma-fe/src/components/user_autosuggest/user_autosuggest.js

import BlockCard from '../block_card/block_card.vue'

const debounceMilliseconds = 500

export default {
  props: {
    query: {    // function to query results and return a promise
      type: Function,
      required: true
    },
    filter: {   // function to filter results in real time
      type: Function
    }
  },
  components: {
    BlockCard
  },
  data () {
    return {
      term: '',
      timeout: null,
      results: [],
      resultsVisible: false
    }
  },
  computed: {
    filtered () {
      return this.filter ? this.filter(this.results) : this.results
    }
  },
  watch: {
    term (val) {
      this.fetchResults(val)
    }
  },
  methods: {
    fetchResults (term) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.results = []
        if (term) {
          this.query(term).then((results) => { this.results = results })
        }
      }, debounceMilliseconds)
    },
    onInputClick () {
      this.resultsVisible = true
    },
    onClickOutside () {
      this.resultsVisible = false
    }
  }
}