autocomplete doens't trigger search function

braga

Hi,

I really don’t know what I’m missing here… My problem is that the search method is not being triggered when I type something.

I’ve read the docs(http://quasar-framework.org/components/autocomplete.html#Using-Asynchronous-Method-Ajax-call)

and this is my code:

<q-search v-model="terms" placeholder="Start typing a country name">
    <q-autocomplete @search="search" @selected="selected" />
</q-search>

import axios from 'axios'

export default {
  data () {
    return {
      terms: ''
    }
  },
  methods: {
    search (terms, done) {
      axios.get('/statics/users.json')
        .then((results) => {
          console.log(results)
          done(results.data.users)
        })
    },
    selected () {}
  }

Is that not right?(I basically copy the samples from docs and added the request…in which is working coz I’ve tested just above the export default)
Ah, the users.json is just an array with some names like:

[
    "Jane Doe",
    "John Doe"
]

Regards,
Bruno

a47ae

Do you see a network request in your browser network tab? Your code looks correct to me, but I am not sure if you can load static data with axios.

braga

Hi, @a47ae, thanks for your reply!

I do not see a request on the browser’s network tab BUT outside the search () {} function if I make the request I can console.log and what shows me on the console is this:

Object { data: Array[2], status: 200, statusText: "OK", headers: Object, config: Object, request: XMLHttpRequest }

so I think axios support requests for static json files…

Anyhow thanks for your reply!

krsyoung

Curious, what happens if you put a log statement right at the top of the search function (or trigger a debug point)? It never shows?

What version of Quasar are you using?

Any chance the template code is backwards? This is what I’ve been using (and it works - q-autocomplete then q-search):

  <q-autocomplete v-model="terms" @search="search" @selected="selected" :delay="0" :max-results="25">
    <q-search v-model="terms" placeholder="Search all codes" />
  </q-autocomplete>

braga

Hi @krsyoung , thanks for your reply

A console.log on the first line of the code doesn’t do anything as the function is not being triggered. HOWEVER, if I write the component like you did trigger it, but I do get another error refering to the <QListItem>(maybe the data I pass through the done() is wrong?) component, like this:

[Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got String.

found in

---> <QListItem>
       <QPopover>
         <QAutocomplete>
           <Index> at /home.../src/components/index.vue
             <App> at /home/.../src/App.vue
               <Root>

By the way I’m using the version 0.13.10 in this project

braga

Ok, I gave up trying to make it work on quasar v0.13.10 as the template that I’m using is being deprecated… On quasar v0.14.1 I was able to make it work without any problem.

Anyway thanks for those who tried to help.

a47ae

Oh, you should have told us that you are using v0.13, I was assuming you used v0.14, that explains your error.
The docs for v0.13 are located here: http://v0-13.quasar-framework.org/components/autocomplete.html but I recommend upgrading to 0.14 anyway, so if it now works, stick with 0.14

braga

@a47ae

Damn, my bad. Didn’t pay attention on the doc’s version. But anyway thanks for the help.

No More Posting New Topics!

autocomplete doens't trigger search function