Skip to content
Home

Autocomplete

Info
Demos
Properties
Events

Demos

Default autocomplete

Code Editor
<Autocomplete data={topMovies} label="Label" />

Autocomplete with numbers

Code Editor
<Autocomplete
  input_value="201"
  show_clear_button
  label="Label"
  data={numbersData}
  search_numbers={true}
/>

Autocomplete with a custom title

  • keep_value means the input value gets not removed after an input blur happens.
  • show_clear_button means a clear button will show up when the input field contains a value.
Code Editor
<Autocomplete
  data={topMovies}
  keep_value={true}
  show_clear_button={true}
  label="Label"
  placeholder="Custom placeholder ..."
  on_change={({ data }) => {
    console.log('on_change', data)
  }}
/>

Async usage, dynamically update data during typing

This example simulates server delay with a timeout and - if it gets debounced, we cancel the timeout. Read more about the debounce method.

Also, you may consider using disable_filter if you have a backend doing the search operation.

Code Editor
const onTypeHandler = ({
  value,
  showIndicator,
  hideIndicator,
  updateData,
  debounce,
  /* ... */
}) => {
  console.log('typed value:', value)
  showIndicator()
  debounce(
    ({ value }) => {
      console.log('debounced value:', value)

      // simulate server delay
      const timeout = setTimeout(() => {
        // update the drawerList
        updateData(topMovies)
        hideIndicator()
      }, 600)

      // cancel invocation method
      return () => clearTimeout(timeout)
    },
    {
      value,
    },
    250,
  )
}
render(
  <Autocomplete
    mode="async"
    on_type={onTypeHandler}
    no_scroll_animation={true}
    placeholder="Search ..."
  />,
)

Update data dynamically on the first focus

Code Editor
const onFocusHandler = ({ updateData, dataList, showIndicatorItem }) => {
  if (!dataList.length) {
    showIndicatorItem()
    setTimeout(() => {
      updateData(topMovies)
    }, 1e3)
  }
}
render(
  <Autocomplete
    mode="async"
    no_scroll_animation={true}
    prevent_selection={true}
    on_type={({ value /* updateData, ... */ }) => {
      console.log('on_type', value)
    }}
    on_focus={onFocusHandler}
  />,
)

With a Button to toggle the open / close state

NB: Just to show the possibility; the data is given as a function.

Code Editor
<Autocomplete
  label="Label"
  value={10}
  show_submit_button={true}
  on_change={({ data }) => {
    console.log('on_change', data)
  }}
>
  {() => topMovies}
</Autocomplete>

With a predefined input/search value

Code Editor
<Autocomplete
  label="Label"
  input_value="the pa ther"
  no_animation
  on_change={({ data }) => {
    console.log('on_change', data)
  }}
>
  {() => topMovies}
</Autocomplete>

Different sizes

Four sizes are available: small, default, medium and large.

Code Editor
<Flex.Vertical>
  <Autocomplete label="Label" size="default" data={() => topMovies} />
  <Autocomplete label="Label" size="medium" data={() => topMovies} />
  <Autocomplete label="Label" size="large" data={() => topMovies} />
</Flex.Vertical>

Data suffix value

Data is provided as such:

const { locale } = React.useContext(Context)
const data = [
  {
    suffix_value: (
      <NumberFormat currency srLabel="Total:" locale={locale}>
        {12345678}
      </NumberFormat>
    ),
    selected_value: `Brukskonto (${ban})`,
    content: ['Brukskonto', ban],
  },
]
12 345 678,00 kr
Code Editor
const CustomWidth = styled(Autocomplete)`
  .dnb-drawer-list__root,
  .dnb-autocomplete__shell {
    width: 50vw;
    min-width: 15rem;
    max-width: 30rem;
  }
`
render(
  <CustomWidth
    value={1}
    data={numbers}
    size="medium"
    input_icon={null}
    show_submit_button
    label="From account"
    label_direction="vertical"
  />,
)

Custom width

Code Editor
const CustomWidthOne = styled(Autocomplete)`
  .dnb-autocomplete__shell {
    width: 10rem;
  }
`
const CustomWidthTwo = styled(Autocomplete)`
  &.dnb-autocomplete--is-popup .dnb-drawer-list__root {
    width: 12rem;
  }
`
const CustomWidthThree = styled(Autocomplete)`
  /** Change the "__shell" width */
  .dnb-autocomplete__shell {
    width: 12rem;
  }

  /** Change the "__list" width */
  .dnb-drawer-list__root {
    width: 20rem;
  }
`
render(
  <Flex.Vertical>
    <CustomWidthOne
      label="Label"
      label_sr_only
      size="default"
      icon_position="left"
      data={topMovies}
    />
    <CustomWidthTwo
      label="Label"
      label_sr_only
      size="medium"
      data={topMovies}
    />
    <CustomWidthThree
      label="Label"
      label_sr_only
      size="large"
      align_autocomplete="right"
      icon_position="right"
      input_icon="bell"
      data={topMovies}
    />
  </Flex.Vertical>,
)

Autocomplete with status message

Please select a valid date
Code Editor
<Autocomplete
  data={topMovies}
  label="Label"
  status="Please select a valid date"
  status_state="info"
  show_submit_button
/>