[Solved] Trigger autocomplete without submitting a form

[Stanley]

Dear Quasar team,

I did some search on this topic and it seems the best workaround is using iframe.
Could you please check this link: https://stackoverflow.com/questions/15462991/trigger-autocomplete-without-submitting-a-form
So my question is that using iframe is the best practice?
Thank you!

[dobbel]

This post is deleted!

[Stanley]

Could anyone have a look, thanks!
This may not related to Quasar topic, but still appreciate if you have some proposal.
Also, in Quasar V0.17, there is a component called QAutoComplete, not sure why it is obsolete now.
Thank you!

[dobbel]

@Stanley

Here’s some info about autocomplete:

https://quasar.dev/vue-components/input#Basic-features
https://quasar.dev/vue-components/form#Turning-off-Autocompletion
https://quasar.dev/vue-components/select#Native-attributes-with-use-input

[Stanley]

@dobbel Thanks!
I did some research again it seems using the iframe is the best choice.

<iframe name="💾" style="display:none" src="about:blank"></iframe>
<form target="💾" action="about:blank">
    <input name="user">
    <input name="password" type="password">
    <input value="Login" type="submit">
</form>

Pros are
1). shorter code
2). no jQuery
3). no server-side page loaded
4). no additional javascript
5). no additional classes necessary

[dobbel]

@stanley

OK , good info, using an iframe sounds a bit hacky though…

[Stanley]

@dobbel yes, that’s true. There are some disadvantages about iframe, but I have no other better choice.

In addition, I found Quasar can provide autocomplete, but it’s not complete.
Please see my demo. https://codepen.io/Stanley-549393092/pen/oNzRXde
Here, it uses vue modify @submit.prevent so that submit event will no longer reload the page.
Step1. Input name and click button ‘submit’ (or press enter), you can find the value in the autocomplete list.
Step2. If you change the name and submit again, you can’t find the value.
Step3. If you refresh the browser and submit again, now you can see it.
It seems Q-Input can only remember the name when the first time.

Anyway, I hope it can be improved in future.
From the point of technical view, I think it can be implemented by E.g. LocalStorage if we want to deprecate iframe.

[dobbel]

@stanley

You could see if there’s a github issue about this. If not you could create a new feature request with your research.

[Stanley]

@dobbel Thanks!
Feature request is created.
https://github.com/quasarframework/quasar/issues/8371

[metalsadman]

Autocomplete is a native browser feature, which is what qinput’s wrapped native input does.