Skip to content
Home

Autocomplete

Info
Demos
Properties
Events

Demos

Default autocomplete

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

Autocomplete with numbers

<Autocomplete

  input_value="201"

  show_clear_button

  label="Label:"

  data={[

    format(20001234567, {

      ban: true,

    }),

    format(22233344425, {

      ban: true,

    }),

    format(1234.5, {

      currency: true,

    }),

    format('+47116000', {

      phone: true,

    }),

  ]}

  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.
<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.

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

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.

<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

<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.

<FormRow direction="vertical">

  <Autocomplete

    label="Label:"

    size="default"

    bottom

    data={() => topMovies}

  />

  <Autocomplete

    label="Label:"

    size="medium"

    bottom

    data={() => topMovies}

  />

  <Autocomplete

    label="Label:"

    size="large"

    bottom

    data={() => topMovies}

  />

</FormRow>

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

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(

  <FormRow direction="vertical">

    <CustomWidthOne

      label="Label:"

      label_sr_only

      size="default"

      icon_position="left"

      bottom

      data={topMovies}

    />

    <CustomWidthTwo

      label="Label:"

      label_sr_only

      size="medium"

      bottom

      data={topMovies}

    />

    <CustomWidthThree

      label="Label:"

      label_sr_only

      size="large"

      align_autocomplete="right"

      icon_position="right"

      input_icon="bell"

      bottom

      data={topMovies}

    />

  </FormRow>

)

Autocomplete with status message

Please select a valid date
<Autocomplete

  data={topMovies}

  label="Label:"

  status="Please select a valid date"

  status_state="info"

  show_submit_button

/>