OcSearchBar component
Description
The OcSearchBar component displays an input element used for searching resources or to filter local results.
Accessibility
The label is required and represents the name of the input. It's not visible on the screen and only used by screen readers.
Landmark role=search
Given there is only one instance of <oc-search-bar> per page/route, this component should communicate its purpose, being the main site search, to screen readers. If the component serves as a filter form, it is advised to disable the landmark role via is-filter="true".
Making sure a submit button exits
Both a search and filter form does need a submit button, regardless if the button is visually perceivable or not. If a "buttonless" look is desired, use button-hidden="true", which renders the button visually hidden.
The aria-label of the loading spinner can be set via loading-accessible-label. If not set, it will default to "Loading results".
Examples
Default
The most basic use case requires a label property. The components emits a search event when the user submits the form via Enter or by clicking the search button.
<template>
<oc-search-bar label="Search files" placeholder="Search files" @search="onSearch" />
<p>Search query: {{ searchQuery }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const searchQuery = ref<string>()
const onSearch = (val: string) => {
searchQuery.value = val
}
</script>Hidden search button
The search button can be hidden via the button-hidden property.
<template>
<oc-search-bar
label="Search files"
placeholder="Search files"
:button-hidden="true"
@search="onSearch"
/>
<p>Search query: {{ searchQuery }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const searchQuery = ref<string>()
const onSearch = (val: string) => {
searchQuery.value = val
}
</script>Advanced search
When the advanced search icon is displayed (which is the default behavior), clicking it will emit an advancedSearch event. This can e.g. be used to redirect the user to a dedicated search result page.
<template>
<oc-search-bar
label="Search files"
placeholder="Search files"
:button-hidden="true"
@search="onSearch"
@advanced-search="advancedSearch"
/>
<p>Search query: {{ searchQuery }}</p>
<p v-if="advancedSearchTriggered">Advanced search has been triggered.</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const searchQuery = ref<string>()
const advancedSearchTriggered = ref(false)
const onSearch = (val: string) => {
searchQuery.value = val
}
const advancedSearch = () => {
// handle advaned search...
advancedSearchTriggered.value = true
}
</script>