# Search
Component name: <v-search>
# Examples
# Basic
# Basic API
Name | Type | Description | Default |
---|---|---|---|
url | String | URL called asynchronously to fetch search results based on the user's search query. The supplied url must contain a {query} placeholder. | - |
placeholder | String | Placeholder text shown when search field is empty. | - |
min-chars | Number | The minimum number of search query characters required before searching starts. | 2 |
option-id | String | Names the object property used to identify individual search results. The property must be unique across all options. | - |
label | String | Names the object property used to display the result. | - |
slot:custom-no-results | Slot | Slot used to show a custom message, when no results are found. | - |
@search-result | Event | Event triggered when a search with results has completed. The query value can be found in the $event object. | - |
@search-no-result | Event | Same as @search-result but without results. | - |
@select | Event | Event triggered when a selection has been made. The selected value can be found in the $event object. | - |
Notice
v-search
also supports grouped options and options with meta labels using the same API as v-searchable-select
# Trending topics
To show a list of trending topics when the search opens, apply the trending
property.
# API
Name | Type | Description | Default |
---|---|---|---|
trending | Array | Data used to display trending search topics. | [] |
# Custom search results
Use the custom-result
slot to define custom search result markup.
# API
Name | Type | Description | Default |
---|---|---|---|
slot:custom-result | Slot | Use this slot to define custom search results. A scoped slot (opens new window) property called result is available. | - |
← Ribbon Search local →