Vuetify: Feature request: Autocomplete with dynamic loading/remote data source

Created on 28 Jun 2017 · 7Comments · Source: vuetifyjs/vuetify

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/).

feature

Source

gpassero

👍11

Most helpful comment

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>

Darkside73 on 6 Aug 2017

👍12

All 7 comments

i have also been doing something similar!

how ever i have been more focused on being able to navigate forms fluidly.

i have also been trying to make it a more generic use, allow for either server-side processing or client side processing. If you are interested, i can put up my code once i'v finished.

lgullestrup on 29 Jun 2017

Sounds good.

johnleider on 29 Jun 2017

I am looking for similar feature

vsrinivas150283 on 21 Jul 2017

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>

Darkside73 on 6 Aug 2017

👍12

How I can make this with a https://pokeapi.co/ v-select only support arrays? I need to convert this to arrays?

Pblfer on 7 Sep 2017

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

johnleider on 11 Sep 2017

👍1

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord