Searchbox

Allows searching for something

Usage

The Searchbox component comes in two variants: instant search and regular search. The instant search displays the results as the user types. The regular search only perform a search for results when the user presses the enter key or clicks the search button.

Showing search results for:

<template>
  <div>
    <winui-searchbox placeholder="Instant" @search="handleSearch" instant />
    <winui-searchbox placeholder="Regular" @search="handleSearch" />
    <div>
      Showing search results for: <strong>{{ searchValue }}</strong>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
    };
  },
  methods: {
    handleSearch(value) {
      this.searchValue = value;
    },
  },
};
</script>

Props

instant optional

• Type: boolean
• Default: false

Whether the search should be instant or not.

placeholder optional

• Type: string
• Default: "Search"

The placeholder text to display in the searchbox.

@search optional

• Type: (query: string) => void
• Default: undefined

The handler function that will be called when the user performs a search. The function will be called with the search query as an argument.

Customization

Use the class name .winui-searchbox to override/customize the component's styles.

Examples

Debouncing (opens new window) instant search

Search value:

<template>
  <div>
    <winui-searchbox instant @search="handleSearch" />
    <div>Search value: {{ searchValue }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      timeout: null,
    };
  },
  methods: {
    handleSearch(value) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.searchValue = value;
      }, 500);
    },
  },
};
</script>