Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Filtering and Autocomplete
We can add an autocomplete with the q-select component.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
filled
v-model="model"
use-input
input-debounce="0"
label="Simple filter"
:options="options"
@filter="filterFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</q-layout>
</div>
<script>
const stringOptions = ["apple", "orange", "grape"];
new Vue({
el: "#q-app",
data: {
options: [],
model: []
},
methods: {
filterFn(val, update) {
if (val === "") {
update(() => {
this.options = stringOptions;
});
return;
}
update(() => {
const needle = val.toLowerCase();
this.options = stringOptions.filter((v) =>
v.toLowerCase().includes(needle)
);
});
}
}
});
</script>
</body>
</html>
We add the q-select component with the use-input options to let users enter values into the dropdown.
And we add the @filter directive to listen for inputs from the user.
filterFn has the val parameter which has the inputted value.
update is a function that lets us update the options when we type something into the input box.
The no-option slot lets us show something when no options are found.
To add an autocomplete input, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-select
filled
:value="model"
use-input
hide-selected
fill-input
input-debounce="0"
:options="options"
@filter="filterFn"
@input-value="setModel"
hint="Text autocomplete"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</q-layout>
</div>
<script>
const stringOptions = ["apple", "orange", "grape"];
new Vue({
el: "#q-app",
data: {
options: [],
model: []
},
methods: {
filterFn(val, update) {
if (val === "") {
update(() => {
this.options = stringOptions;
});
return;
}
update(() => {
const needle = val.toLowerCase();
this.options = stringOptions.filter((v) =>
v.toLowerCase().includes(needle)
);
});
},
setModel(val) {
this.model = val;
}
}
});
</script>
</body>
</html>
We keep the use-input prop and @filterFn directives the same.
And we add the fill-input prop to enable the autocomplete.
We separate the v-model directive into the @input-value directive and the value prop.
We listen to the input-value event to get the inputted value and set it as the value of the model reactive property.
And we set the value to the model reactive property to set the inputted value.
Conclusion
We can add filtering and autocomplete dropdowns into our Vue app with the Quasar library.