Is there a way to make a request whenever I want?

[AndreiaMatiasSilva]

I'm trying to make a request using
this.$refs.autocomplete.getData(string);

but the component does not react.

[BosNaufal]

Hi @AndreiaMatiasSilva,
I know it's too late to discuss it. But, would you like to tell me the case when do you want to make a request outside of the exsisting event from autocomplete?

[MingJen]

I have a case.

[
'B-10',
'B-10-1',
'B-10-2,
]

When I key in B-10 and select it.
I want to show B-10-1 and B-10-2 again.

So I want to getData again when onSelect.
but i don't know how to do that.

[timberkeley]

I had a similar issue and implemented is follows:

Added ref="autocomplete" to auto complete

  onSelect (obj) {
     this.$nextTick(() => {
       this.$refs.autocomplete.setValue(obj.Text)
       this.$refs.autocomplete.showList = true
       this.$refs.autocomplete.getData(obj.Text)
    })
}

Not pretty but it seems to work for me.

[MingJen]

Hi, @timberkeley

Thanks for your help.

I try to use your solution, but only works when use keyboard. Can't use on mouse click.

Finally, I use setTimeout replace nextTick, but I really need more smooth solution.

[BosNaufal]

Hi @MingJen,
would you like to explain to me more clearly? Do you want to make the list keep showing even one of them has been selected?

[MingJen]

Hi @BosNaufal,

I record a gif

I want to use the selected result to query again.

onSelect(selectInfo)
{
    let refName = selectInfo.key;
    setTimeout(() => {
        let e = {
            target: {value: selectInfo.name}
        };
        this.$refs[refName][0].handleInput(e);
    }, 350);
}

[BosNaufal]

Hi @MingJen,
I think, we just need to make a method to open the data list of autocomplete, right?

so the flow will be:
on selected -> change the props options of autocomplete -> open it
-> on selected -> change the props options of autocomplete -> open it

[timberkeley]

It would also be nice to use the 'value' props / emit 'input' to control the search term. I was going to do a pull request for this. That way you could just use v-model to control what you are searching for and also pick up the value typed if you want to use it directly, for a full search rather than a suggestion for example.

I was going to do a pull request for this, time permitting.

[timberkeley]

Hi @BosNaufal & @MingJen,
I have just opened a pull request that I think implements this feature.

You can reference a data value using:

v-model="searchText"

and then simply use:

this.searchText = newText

In the onSelect callback and the component should re-search for the new text.

Please check it out to see if the solution is acceptable.

Cheers, Tim