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>
<!-- Disabled state -->
<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 PropertyTypeDescription
debounceNumberNumber of ms to debounce input. Default to 300.
iconStringIcon to use.
placeholderStringPlaceholder to use.
readonlyBooleanWhen set to true user can not change model value.
disableBooleanWhen 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 MethodDescription
clear()Resets the model to an empty string.

Vue Events

Vue EventDescription
@inputTriggered on model value change with the new value.
@focusTriggered when search input gets focus.
@blurTriggered when search input loses focus.
@enterTriggered 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>