Search input

Description

<wui-search-input> is a more specific version of <wui-form-input>, which additionally renders <wui-input-group> with a search icon and a clear button.

Please note: The default import of the search-input component points to a deprecated version. Please use the named export "WuiSearchInput".

Control sizing

Set heights using the size prop to sm or lg for small or large respectively.

To control width, place the input inside standard WUI grid column.

<template>
  <wui-form>
    <wui-form-group>
      <p>Small</p>
      <wui-search-input v-model="query" size="sm" />
    </wui-form-group>

    <wui-form-group>
      <p>Medium</p>
      <wui-search-input v-model="query" />
    </wui-form-group>

    <wui-form-group>
      <p>Large</p>
      <wui-search-input v-model="query" size="lg" />
    </wui-form-group>
  </wui-form>
</template>

<script>
  export default {
    data() {
      return {
        query: "false",
      };
    },
  };
</script>
<!-- wui-search-input-size.vue -->

Custom height

You can also specify a custom size by setting the height property via CSS class or style attribute:

<template>
  <wui-form>
    <wui-form-group>
      <p>Search input - custom height 60px</p>
      <wui-search-input v-model="query" style="height: 60px" />
    </wui-form-group>
  </wui-form>
</template>

<script>
  export default {
    data() {
      return {
        query: "false",
      };
    },
  };
</script>
<!-- wui-search-input-custom-size.vue -->

Remove surrounding borders

When wui-search-input is placed with 100% width in a popup or dialog menu, the top, left and right borders can be removed with the border-bottom-only prop.

<template>
  <div>
    <wui-button
      id="example-btn-search"
      variant="default"
      outline
      title="Search"
      v-w-popup.example-popup-search
    >
      Open search dialog
    </wui-button>

    <wui-popup
      ref="example-popup-search"
      id="example-popup-search"
      :offset="{ crossAxis: -50 }"
      :shift="true"
      target="example-btn-search"
    >
      <wui-search-input
        ref="example-popup-search-input"
        v-model="query"
        class="wui-popup-search"
        border-bottom-only
        :trim="true"
        placeholder="Search keywords"
        style="height: 40px"
      ></wui-search-input>
      <div id="results" class="m-t-30" style="min-width: 300px">&nbsp;</div>
    </wui-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        query: "false",
      };
    },
  };
</script>
<!-- wui-search-input-border-bottom-only.vue -->

Remove clear button

If you don't want the clear functionality, the corresponding button can be hidden with the no-clear-button prop.

<template>
  <wui-form>
    <wui-form-group>
      <wui-search-input v-model="query" :no-clear-button="true" />
    </wui-form-group>
  </wui-form>
</template>

<script>
  export default {
    data() {
      return {
        query: "false",
      };
    },
  };
</script>

<!-- wui-search-input-no-clear-button.vue -->

Search icon at start

You can also display the search icon at the beginning of the input field by setting the search-icon-start property to true:

<template>
  <wui-form>
    <wui-form-group>
      <wui-search-input v-model="query" :search-icon-start="true" />
    </wui-form-group>
  </wui-form>
</template>

<script>
  export default {
    data() {
      return {
        query: "false",
      };
    },
  };
</script>

<!-- wui-search-input-search-icon-start.vue -->

Input busy state

<wui-search-input> provides a busy prop that will flag the search input as busy, which you can set to true or false at any time. When in the busy state, the search root element will have the attribute aria-busy="true". The search input will also render a loading spinner instead of the search or clear icon.

Custom rendering via slots

Custom rendering of icons, buttons or text content is possible using append* and prepend* slots.

The search input field is wrapped in a <wui-input-group>. <wui-search-input> uses <wui-input-group-prepend> and <wui-input-group-append> to display the search icons and clear button at the beginning or end . You can add more input group elements by using the prepend-start, prepend-end, append-start or append-end slots.

• prepend-start - content to place at the beginning of the prepend section. Content will be placed before the search icon if searchIconStart is set
• prepend-end - content to place at the end of the prepend section. Content will be placed after search icon if searchIconStart is set
• append-start - content to place at the beginning of the append section. Content will be placed before the clear button and search icon
• append-end - content to place at the end of the append section. Content will be placed after the clear button and search icon

Please note: if you use the prepend or append slots, the search icon and clear button will be overridden.

<template>
  <wui-form>
    <wui-form-group>
      <p>Search input with custom filter icon at the end</p>
      <wui-search-input v-model="query">
        <template #append-end>
          <wui-button variant="default" outline>
            <wui-fa-icon icon="filter" />
          </wui-button>
        </template>
      </wui-search-input>
    </wui-form-group>

    <wui-form-group>
      <p>
        Search input with custom paw icon (if you need one) *before* the search
        icon
      </p>
      <wui-search-input v-model="query">
        <template #append-start>
          <wui-input-group-text class="wui-bg-color--white border-0 p-x-10">
            <wui-fa-icon icon="paw" />
          </wui-input-group-text>
        </template>
      </wui-search-input>
    </wui-form-group>

    <wui-form-group>
      <p>Replaces the search icon and clear button</p>
      <wui-search-input v-model="query">
        <template #append>
          <wui-input-group-append>
            <wui-button
              v-if="query"
              variant="default"
              outline
              title="clear"
              @click="query = ''"
            >
              <wui-fa-icon :icon="['far', 'eraser']" />
            </wui-button>
            <wui-input-group-text
              v-else
              class="wui-bg-color--white border-0 p-x-10"
              ><wui-fa-icon :icon="['far', 'file-magnifying-glass']"
            /></wui-input-group-text>
          </wui-input-group-append>
        </template>
      </wui-search-input>
    </wui-form-group>
  </wui-form>
</template>

<script>
  export default {
    data() {
      return {
        query: "false",
      };
    },
  };
</script>
<!-- wui-search-input-slots.vue -->

Contextual states

See the wui-form-input docs

Formatter support

See the wui-form-input docs

v-model modifiers

See the wui-form-input docs

Debounce support

See the wui-form-input docs

Autofocus

See the wui-form-input docs

Native and custom events

See the wui-form-input docs

Exposed input properties and methods

See the wui-form-input docs

Component reference

<wui-search-input>

• <wui-search-input> Properties
• <wui-search-input> v-model
• <wui-search-input> Slots
• <wui-search-input> Events

Properties

Note: <wui-search-input> uses <wui-form-input> under the hood and therefore inherits all of its props except list, max, min, noWheel, plaintext, step and type (see the wui-form-input docs).

v-model

Slots

Events

<wui-search-input-header>

@deprecated

• <wui-search-input-header> Properties
• <wui-search-input-header> v-model
• <wui-search-input-header> Events

Properties

v-model

Events

Importing individual components

You can import individual components into your project via the following named exports:

Example

import { WuiSearchInput } from "@wui/wui-vue/lib/search-input";
Vue.component("wui-search-input", WuiSearchInput);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Example

import { SearchInputPlugin } from "@wui/wui-vue/lib/search-input";
Vue.use(SearchInputPlugin);