Example autocomplete with ajax call

a47ae

Register your search callback on to the autocomplete like so @search="handleSearch".
The handle search function gets passed two parameters terms and done.
Terms is the currently entered query and done a callback method to signal that the search has been performed.
Basically the handleSearch function looks like this:

handleSearch (terms, done) {
  // Perform your search request
  SearchApi.search(terms)
    .then(response => {
      // Transform the response to an array defined in the autocomplete docs
      let results = transformSearch(response)
      // Call done and pass the result set
      done(results)
    })
}

a47ae

Because currently, I have another issue with QAutocomplete, I posted a complete example in this Github issue:
https://github.com/quasarframework/quasar/issues/779#issuecomment-320902800

This uses Axios and an Alogolia API endpoint to fetch countries.

lucianoreis

I was able to list the api data, it worked very well, but little freedom to customize the layout of the item list.
Good thing I could do a template for the results.

lucianoreis

@a47ae
I added in the array an ID field, and did something like
<q-autocomplete @selected=“mySelected” />

mySelected (item) {
  let vm = this
  vm.address.countryCode = item.id
}

a47ae

@lucianoreis Sadly I can not use the @selected event because I render multiple of these inputs in a v-for loop, so I do not know to which input the event belongs.

spectrolite

This post is deleted!

spectrolite

This post is deleted!

spectrolite

copied from https://vuejs.org/v2/guide/events.html

Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) event.preventDefault()
    alert(message)
  }
}

spectrolite

and then you just want event.target

spectrolite

@rstoenescu this question/comment ( http://forum.quasar-framework.org/post/3412 ) keeps popping up about various vue-events defined in quasar docs, maybe this snippet from Vue docs should be integrated in quasar docs somehow ?

ian

@a47ae Are you able to give some direction on how to enhance your example at https://github.com/quasarframework/quasar/issues/779#issuecomment-320902800 to enable infinite scroll of results . e.g. return 10 results at a time as the results are scrolled by the user?

No More Posting New Topics!

Example autocomplete with ajax call