DÁP Design System - Search webcomponent

Search component is a form element that allows the user to search for a specific item.

Design system docs

Examples

Default search field

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.

<dap-ds-search 
label="Gyümölcsök"
placeholder="Keresés"
description="Keresés a gyümölcsök között"
>
</dap-ds-search>

Subtle

The search field can be set to subtle mode. In this mode, the search icon has subtle color schema.

<dap-ds-search 
label="Gyümölcsök"
placeholder="Keresés"
description="Keresés a gyümölcsök között"
subtle
>
</dap-ds-search>

Sizes

<dap-ds-stack>
<dap-ds-search 
  size="xs"
  label="Gyümölcsök"
  description="Keresés az extra small gyümölcsök között"
  placeholder="Keresés"
  feedback="This is a feedback message"
  feedbacktype="negative"
>
</dap-ds-search>
<dap-ds-search 
  size="sm"
  label="Gyümölcsök"
  description="Keresés a small gyümölcsök között"
  placeholder="Keresés"
  feedback="This is a feedback message"
  feedbacktype="negative"
>
</dap-ds-search>
  <dap-ds-search 
  size="lg"
  label="Gyümölcsök"
  description="Keresés a large gyümölcsök között"
  placeholder="Keresés"
  feedback="This is a feedback message"
  feedbacktype="negative"
>
</dap-ds-search>
</dap-ds-stack>

Autocomplete

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.

<dap-ds-search
searchMode="autocomplete"
label="Gyümölcsök"
placeholder="Keresés"
description="Keresés a gyümölcsök között"
>
<dap-ds-option-item value="alma">Alma</dap-ds-option-item>
<dap-ds-option-item value="korte">Körte</dap-ds-option-item>
<dap-ds-option-item value="szilva">Szilva</dap-ds-option-item>
<dap-ds-option-item value="barack">Barack</dap-ds-option-item>
<dap-ds-option-item value="szolo">Szőlő</dap-ds-option-item>
<dap-ds-option-item value="meggy">Meggy</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cseresznye</dap-ds-option-item>
</dap-ds-search>

Search with manual input

Search field can have free text functionality. With this feature, the user can type in any text, not just the predefined options.

<dap-ds-search
searchMode="autocomplete"
allowManualInput
label="Gyümölcsök"
placeholder="Keresés"
description="Keresés a gyümölcsök között"
>
<dap-ds-option-item value="alma">Alma</dap-ds-option-item>
<dap-ds-option-item value="korte">Körte</dap-ds-option-item>
<dap-ds-option-item value="szilva">Szilva</dap-ds-option-item>
<dap-ds-option-item value="barack">Barack</dap-ds-option-item>
<dap-ds-option-item value="szolo">Szőlő</dap-ds-option-item>
<dap-ds-option-item value="meggy">Meggy</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cseresznye</dap-ds-option-item>
</dap-ds-search>

Search for the selected item text

With the searchForText attribute, the search field can be set to search for the selected item text instead of the value.

<dap-ds-search
searchMode="autocomplete"
searchForText
label="Gyümölcsök"
placeholder="Keresés"
description="Keresés a gyümölcsök között"
>
<dap-ds-option-item value="alma">Alma</dap-ds-option-item>
<dap-ds-option-item value="korte">Körte</dap-ds-option-item>
<dap-ds-option-item value="szilva">Szilva</dap-ds-option-item>
<dap-ds-option-item value="barack">Barack</dap-ds-option-item>
<dap-ds-option-item value="szolo">Szőlő</dap-ds-option-item>
<dap-ds-option-item value="meggy">Meggy</dap-ds-option-item>
<dap-ds-option-item value="cseresznye">Cseresznye</dap-ds-option-item>
</dap-ds-search>

Remote data

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
    })
})

Importing

import { DapDSSearch } from 'dap-design-system/dist/dds'

Importing React

import { DapDSSearchReact } from 'dap-design-system/dist/react'

Attributes

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'.
`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'` , `'sm'`		The size of the search. Default is 'sm'.
`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.
`noTextComplete`	`boolean`		Whether the search should not complete the 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

Slots

Name	Description
`(default)`	The default slot for the options.

Events

Event Name	Description
`dds-change`	Fired when the search value changes.
`dds-blur`	Emitted when the search loses focus.
`dds-focus`	Emitted when the search gains focus.
`dds-clear`	Emitted when the search is cleared.
`dds-search`	Emitted when the search input value changes.
`dds-input`	Emitted when typing happens in the search input.

CSS Parts

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.