Search component is a form element that allows the user to search for a specific item.
The default search field is basically a text input field with a search icon. It fires the dds-search event when the user hits the enter key or clicks on the search icon.
The search field can be set to subtle mode. In this mode, the search icon has subtle color schema.
Search field can have autocomplete functionality. It can be used to suggest search terms to the user. Like any other 'select' component, the dap-ds-option-item elements should be placed inside the root component.
You can listen to the dds-input event to fetch the data from the server, and you can use the dds-change event to get the selected value.
Search field can have free text functionality. With this feature, the user can type in any text, not just the predefined options.
With the searchForText attribute, the search field can be set to search for the selected item text instead of the value.
Search field can be used to search for remote data. The dds-input event should be listened to and the data should be fetched from the server.
autocomplete.addEventListener('dds-input', event => {
console.log(event.detail)
// Show the loading indicator
autocomplete.loading = true
fetch(`https://dummyjson.com/products/search?q=${event.detail.input}`)
.then(res => res.json())
.then(data => {
// Clear the previous options
autocomplete.innerHTML = ''
// Add the new options
data?.products.forEach(item => {
const option = document.createElement('dap-ds-option-item')
option.value = item.id.toString()
option.appendChild(document.createTextNode(item.title))
autocomplete.appendChild(option)
})
// Hide the loading indicator
autocomplete.loading = false
})
})
import { DapDSSearch } from 'dap-design-system/dist/dds'
import { DapDSSearchReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
selectable | string | 'false' | Show the selected item check mark in the dropdown. Default is 'false'. |
search | boolean | true | |
noAnimation | boolean | true | Whether the search open indicator should be animated. Default is true. |
searchOnValueSet | string | 'false' | |
searchMode | 'none', 'typehead' , 'autocomplete' , 'manual' | 'none' | The search mode of the select. Default is 'none'. |
textComplete | boolean | false | Whether the search should not complete the text. |
value | string | The value of the search. | |
placeholder | string | The placeholder of the search. | |
placement | 'top', 'top-start' , 'top-end' , 'right' , 'right-start', 'right-end' , 'bottom' , 'bottom-start' , 'bottom-end' , 'left' , 'left-start' , 'left-end' | The placement of the select dropdown. Default is 'bottom-start'. | |
opened | boolean | Whether the search dropdown is opened. | |
sync | 'width', 'height' , 'both' | The sync mode of the search dropdown. How the dropdown item size is synced to the trigger element'. | |
label | string | The label of the search. | |
description | string | The description of the search. | |
tooltip | string | The tooltip of the search. | |
size | 'xs', 'sm' , 'lg' | The size of the search. | |
disabled | boolean | Whether the search is disabled. | |
required | boolean | Whether the search is required. | |
readonly | boolean | Whether the search is readonly. | |
autofocus | boolean | Whether the search is autofocus. | |
clearable | boolean | Whether the search is clearable. | |
feedback | string | The feedback content of the search. | |
feedbackType | 'error', 'warning' , 'info' | The feedback type of the search. | |
allowManualInput | boolean | Whether the search allows manual input, or free text. | |
searchForText | boolean | Whether the search should search for the selected item text. | |
searchButtonAriaLabel | string | The aria label of the search button. | |
openOnEmpty | boolean | Whether the search should open on empty results. | |
subtle | boolean | Subtle color version |
| Name | Description |
|---|---|
(default) | The default slot for the options. |
| Event Name | Description | Type |
|---|---|---|
dds-change | Fired when the search value changes. | void |
dds-blur | Emitted when the search loses focus. | void |
dds-focus | Emitted when the search gains focus. | void |
dds-clear | Emitted when the search is cleared. | void |
dds-search | Emitted when the search input value changes. | void |
dds-input | Emitted when typing happens in the search input. | void |
| Part Name | Description |
|---|---|
base | The main search container. |
trigger | The trigger button of the search. |
label | The label of the search. |
description | The description of the search. |
feedback | The feedback of the search. |
tooltip | The tooltip of the search. |
option-list | The option list of the search. |
| Property Name | Description |
|---|---|
--dds-combobox-padding-xs | The padding for extra small size. Defaults to var(--dds-spacing-200). |
--dds-combobox-padding-sm | The padding for small size. Defaults to var(--dds-spacing-200). |
--dds-combobox-padding-lg | The padding for large size. Defaults to var(--dds-spacing-300). |
--dds-combobox-padding-horizontal | The horizontal padding. Defaults to var(--dds-spacing-300). |
--dds-combobox-padding-vertical | The vertical padding. Defaults to var(--dds-spacing-200). |
--dds-combobox-gap | The gap between elements. Defaults to var(--dds-spacing-100). |
--dds-combobox-icon-gap | The gap between icons. Defaults to var(--dds-spacing-200). |
--dds-combobox-action-gap | The gap between action elements. Defaults to var(--dds-spacing-200). |
--dds-combobox-action-padding | The padding for action elements. Defaults to var(--dds-spacing-300). |
--dds-combobox-clear-icon-width | The width of the clear icon. Defaults to var(--dds-spacing-800). |
--dds-combobox-dropdown-icon-right | The right position of the dropdown icon. Defaults to var(--dds-spacing-600). |
--dds-combobox-min-width | The minimum width of the combobox. Defaults to 7.5rem. |
