AutocompleteSingle

AutocompleteSingle component.

Default

<AutocompleteSingle
  data={{
    language: 'fr'
  }}
  dataKey="language"
  column={{
    options: [
      {
        label: 'Français',
        value: 'fr'
      },
      {
        label: 'English',
        value: 'en'
      },
      {
        label: 'Deutsche',
        value: 'de'
      }
    ]
  }}
/>

With creation mode and clearable option

<AutocompleteSingle
  data={{
    language: 'fr'
  }}
  dataKey="language"
  onChange={() => {
    console.log('function called on change of option');
  }}
  column={{
    disableClearable: false,
    canCreate: true,
    onCreate: () => {
      console.log('function called on creation of a new option');
    },
    options: [
      {
        label: 'Français',
        value: 'fr'
      },
      {
        label: 'English',
        value: 'en'
      },
      {
        label: 'Deutsche',
        value: 'de'
      }
    ]
  }}
/>

With creation mode and clearable option

<AutocompleteSingle
  data={{
    language: 'fr'
  }}
  dataKey="language"
  onChange={() => {
    console.log('function called on change of option');
  }}
  column={{
    disableClearable: false,
    canCreate: true,
    onCreate: () => {
      console.log('function called on creation of a new option');
    },
    options: [
      {
        label: 'Français',
        value: 'fr'
      },
      {
        label: 'English',
        value: 'en'
      },
      {
        label: 'Deutsche',
        value: 'de'
      }
    ]
  }}
/>

With some other props from MUI AutoComplete (readOnly, fullWidth) :

<AutocompleteSingle
  data={{
    language: 'fr'
  }}
  readOnly={true}
  fullWidth={true}
  dataKey="language"
  onChange={() => {
    console.log('function called on change of option');
  }}
  column={{
    disableClearable: false,
    canCreate: true,
    onCreate: () => {
      console.log('function called on creation of a new option');
    },
    options: [
      {
        label: 'Français',
        value: 'fr'
      },
      {
        label: 'English',
        value: 'en'
      },
      {
        label: 'Deutsche',
        value: 'de'
      }
    ]
  }}
/>

Props

Name	Type	Required	Default	Description
data	string	yes	---	Describes the first option being displayed. Must contain an attribute with the same name as the dataKey
dataKey	string	yes	---	Id that describes the list of options (ex: "language")
column	function/Array	yes	---	Defines the list of options and how they should be handled by the component. See Column Props
onChange	function	no	(option)=>{}	Function called when changing the current option
...otherProps	object	no	{}	Other MUI AutoComplete props, such as readOnly, fullWidth, etc

Column Props

Name	Type	Required	Default	Description
canCreate	boolean	no	false	Allow or not the possibility to create a new option
disableClearable	boolean	no	true	Allow or not the possibility to clear the input field of the current option
onCreate	function	no	(inputValue, option)=>{}	Function called when creating a new option