Multiline autocomplete (q-select with textarea input?)



  • By using <q-select> with the use-input option we can make a really nice auto-complete field.
    I would like to have multi-line support for this (single-selection). Can we use it with a textarea somehow?

    Is it possible that this could be implemented in QSelect?`I have a fear that this use case is too uncommon 😟


    EDIT: Sorry, I think I was not clear. So let me re-state the issue:
    I made something like this using Quasar v0.17: https://jsfiddle.net/og4dy9zu/3/ : a textarea(!) with pre-defined options. (It’s actually used for auto-completion, but to simplify the example I’m using a static list of options).
    I am not able to do it with the current version of Quasar, because the q-autocomplete is gone.

    Now, is it possible to put a textarea input inside a q-select? Or, if not - is there a possibility that this can be supported again?



  • Qselect multiple wraps the values to next line as they are added, so i dont get why you need it to work like a text area.



  • @metalsadman I have a record that stores a text with multiple lines. And in the form there should be suggestions/autocomplete results



  • With Quasar v0.17, it could easily be done with <q-autocomplete> inside a textarea.
    See here: https://jsfiddle.net/og4dy9zu/3/ This is what I’m looking for.

    It is the last thing that holds me back from rolling out a new version of my project including the Quasar v1 upgrade 😢



  • @chyde90 it won’t parse the \n for you in the options, so what you could do is make those into html equivalent ie. <br>, since it does accept html. https://codepen.io/metalsadman/pen/yLLjyOy?editors=1011



  • @metalsadman hmm… it seems I didn’t make the problem clear enough😅 I edited my original post to make it more clear.
    The jsfiddle shows the desired behavior, which I can’t re-produce in the current version of Quasar.

    I’m not talking about multi select mode. And I don’t mind that the options in my jsfiddle link are not displayed with multiple lines.
    The key point is that the user writes a multi-line text. That means when he hits the enter-key, there is a new line (in the same string) - just like <q-input type="textarea" />. But this as the input in a q-select, so that the user can also choose from options as an alternative to typing everything in.



  • @chyde90 you could try issue a feature request for this, maybe a prop (multiline or smth) that would be passed to the inner input element to make its type a textarea when using use-input prop. kind of odd behavior tho, not sure if that was intended back in v0.17. One could do it using qinput + qmenu in v1, but i dont know if it’s worth the hassle.



  • How can I do it؟



  • @mysocialpbn Op haven’t filed a feature request, so you can build similar functionality on your own, using qinput and qmenu (if this is a priority for you).


Log in to reply