Search bar
Quasar Search bars lazy evaluate the input with a debounce of 300ms by default.
Basic Usage
<q-search v-model="searchModel"></q-search> <q-search disable v-model="searchModel" ></q-search>
|
Error State
Add has-error
CSS class:
<q-search class="has-error" v-model="searchModel" ></q-search>
|
Vue Properties
Vue Property | Type | Description |
---|
debounce | Number | Number of ms to debounce input. Default to 300. |
icon | String | Icon to use. |
placeholder | String | Placeholder to use. |
readonly | Boolean | When set to true user can not change model value. |
disable | Boolean | When set to true user can not change model value. |
Example:
<q-search v-model="searchModel" :debounce="600" placeholder="Hotels" icon="local_hotel" ></q-search>
|
Vue Methods
Vue Method | Description |
---|
clear() | Resets the model to an empty string. |
Vue Events
Vue Event | Description |
---|
@input | Triggered on model value change with the new value. |
@focus | Triggered when search input gets focus. |
@blur | Triggered when search input loses focus. |
@enter | Triggered when Enter key is detected. |
Coloring
Use one of the Quasar colors from the Color Palette, like primary
, secondary
, orange
, teal
as CSS class:
<q-search class="orange" v-model="searchModel" ></q-search>
|
Usage with Layout
If you want to place on Layout header or footer:
<q-layout> ... <div slot="header" class="toolbar orange"> <q-search class="orange" v-model="searchModel" ></q-search> </div> ... </q-layout>
|