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>

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'

Slots

No slots available.

Attributes

Property	Type	Description
`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`	`'sm' 'lg'`	The size of the search. Default is 'md'.
`searchMode`	`'none' 'typehead' 'autocomplete' 'manual'`	The search mode of the select. Default is 'none'.
`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.
`autocomplete`	`boolean`	Whether the search is autcomplete.
`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.
`selectable`	`boolean`	Show the selected item check mark in the dropdown. Default is false.
`noAnimation`	`boolean`	Whether the search open indicator should be animated. Default is true.

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.