Autocomplete

Info
Demos
Properties
Events

Demos

Default autocomplete

<Autocomplete

  data={topMovies}

  label="Label:"

/>

Autocomplete with numbers

const numbers = [

  format(20001234567, { ban: true }),

  format(22233344425, { ban: true }),

  format(1234.5, { currency: true }),

  format('+47116000', { phone: true }),

]

render(

  <Autocomplete

    input_value="201"

    show_clear_button

    label="Label:"

    data={numbers}

    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.

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

/>