No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How can I achieve a text Input with dropdown options

    Help
    2
    3
    1752
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • U
      uselinux last edited by

      Hey all. Using Quasar for our site redesign. So far, so good. Loving it.

      Our design calls for a search input which when clicked, drops some options. Clicking one will initiate a category search rather than a normal text search.

      input-select.png

      This is an odd hybrid between a select and an input and I’m not sure how I should approach it.
      Any help is appreciated.

      1 Reply Last reply Reply Quote 0
      • Allan-EN-GB
        Allan-EN-GB Admin last edited by Allan-EN-GB

        Take a look here: https://quasar.dev/vue-components/select#Filtering-and-autocomplete

        QSelect is quite a big component so spend some time on the docs and examples.

        U 1 Reply Last reply Reply Quote 1
        • U
          uselinux @Allan-EN-GB last edited by

          @Allan-EN-GB I’ve gotten this far today. Clicked right after posting. Of course.

          I was under the impression it was not working as I saw no formData from both the input and the dropdown.

          On the form page: “If you are using the native action and method attributes on a QForm, please remember to use the name prop on each Quasar form component, so that the sent formData to actually contain what the user has filled in.”

          Although I’m not using native that was the case to see data. Either way I can proceed 🙂

          onSubmit (evt) {
          	const formData = new FormData(evt.target)
          
          	for (const value of formData.values()) {
          		console.log(value)
          	}
          },
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post