AisSearchInput

AisSearchInput provides a branded search input. The input includes the search icon as decoration and exposes a control to clear input when the search has a value. This component also supports all the properties of AisInput.

<script setup>
  import { ref } from 'vue';
  import { AisSearchInput } from '@ais-public/ais-components';
  const searchValue = ref('');
  const previousValue = ref('');
</script>

<template>
  <div class="grid gap-4">
    <AisSearchInput
        ref="search"
        placeholder="Enter search value..."
        v-model="searchValue"
        @clear="previousValue=$event"
        clearButtonLabel="Clear example search input"
    />
    <div v-if="previousValue" class="p-4 bg-ui-gray-50">
      <span class="font-semibold">Previous value:</span> {{previousValue}}
    </div>
  </div>
</template>

Props

v-model

Use the v-model directive to bind to the search input's value. v-model uses the modelValue prop under the covers. See Vue's documentation for details.

busy

Use the busy prop to indicate that the search input is busy. The default value is false. This prop is commonly used when a search triggers an asynchronous action and must await a response. The busy status will override the search input's clear input control (close icon).

<script setup>
  import { ref } from 'vue';
  import { AisSearchInput } from '@ais-public/ais-components';

  const searchValue = ref('');
  const busy = ref(false);

  const busyDemo = () => {
    if(!busy.value && searchValue.value) {
      busy.value = true
      setTimeout(() => busy.value = false, 1000)
    }
  }
</script>

<template>
  <AisSearchInput
    placeholder="Enter search value..."
    v-model="searchValue"
    @update:modelValue="busyDemo"
    :busy="busy"
  />
</template>

clearable

The clearable prop enables the clear control (i.e. close icon) when the input has a value. clearable is true by default. However, it may be useful to toggle clearable when using AisSearchInput in another component. For instance, a typeahead may not want to show the clear control as the user is entering the search query, but then show the control once the user has selected a specific value.

<script setup>
  import { ref } from 'vue';
  import { AisSearchInput } from '@ais-public/ais-components';
  import { AisButton } from '@ais-public/ais-components';
  import { AisButtonBar } from '@ais-public/ais-components';

  const searchValue = ref("She's richer than Croesus, she's tougher than leather");
  const clearable = ref(true);
</script>

<template>
  <div class="flex flex-col flex-wrap items-start sm:flex-row w-full sm:w-auto gap-2">
    <AisSearchInput
      placeholder="Enter search value..."
      v-model="searchValue"
      :clearable="clearable"
      class="grow"
    />

    <AisButton
      variant="primary" hover fast press
      @click="clearable = !clearable"
    >
      Toggle Clearable
    </AisButton>
  </div>
</template>

clearButtonLabel

Provide a text label for screen readers for the button that clears the input value. Default value is Clear search.

Events

@update:modelValue

AisSearchInput uses Vue's standard v-model configuration. The model will be passed down to the input. As a result, it will fire the @update:modelValue event whenever the input's value changes. See AisInput for more details.

@clear

The @clear event will fire when the user clicks the close button that appears when the input has a value. The input will receive focus on the @clear event, and the event's payload will contain the previous value.

Methods

focus()

AisSearchInput exposes a focus() method to programmatically focus the input element. The method can be invoked through a template ref specified on a AisSearchInput component.

<script setup>
import { ref } from 'vue';
import { AisSearchInput } from '@ais-public/ais-components';
import { AisButton } from '@ais-public/ais-components';

const searchValue = ref('');
const search = ref(null);
const handleFocus = () => search.value.focus();
</script>

<template>
  <div class="flex gap-4">
    <AisSearchInput
        ref="search"
        v-model="searchValue"
        placeholder="Enter search value..."
        class="grow"
    />

    <AisButton
      @click="search.focus()"
      hover press
    >
      Focus 1
    </AisButton>
    <AisButton
      @click="handleFocus"
      variant="secondary"
      hover press
    >
      Focus 2
    </AisButton>
  </div>
</template>