How can I achieve a text Input with dropdown options

uselinux

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.

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.

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.

uselinux

@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)
	}
},