Feature request: Autocomplete with dynamic loading/remote data source

Currently the component v-select, with the autocomplete directive, allows the selection of items within a specific list (defined in the items property).

In some cases there are many records to be listed, which may be maintained in a server, e.g. select a student from hundreds students enrolled in a course. In this case, the input text should be used to filter all the student records in the server by name, optinally with additional parameters (ex. the course selected).

This feature is present in many libraries, as JQuery: https://jqueryui.com/autocomplete/#remote

I’m attaching to the request my AutoComplete component, which I implemented by extending Vuetify Select.

AutoComplete.zip

Example of use:

<auto-complete label="Student" v-model="exam.student" required
    prepend-icon="person" :disabled="!exam.course" 
    data-url="students" :data-params="{ course: exam.course }" data-post 
    item-text="name" item-value="id">

Please note that I’m using vue-resource and the url informed “students” is combined with the server root (http://www.myserver.com/ws/).

[Darkside73]

I use autocomplete with remote data fetching by utilizing input.native and debounce use input:

<template>
  <v-select
    v-model="state"
    label="Select"
    :items="states"
    @input.native="loadStates"
    autocomplete
  ></v-select>
</template>

<script>
import debounce from 'debounce'

export default {
  data () {
    return {
      state: null,
      states: []
    }
  },
  methods: {
    loadStates: debounce((event) => {
      if (event.target.value.length > 2) {
        axios.get(`/api/states?q=${event.target.value}`).then(({ data }) => {
          this.states = data
        })
      }
    }, 200)
  }
}
</script>

[johnleider]

0.15.3 saw a massive improvement to the tools available for asynchronous item loading. Going to consider this resolved.