AutocompleteMultiple

AutocompleteMultiple component.

Default

<AutocompleteMultiple
  options={[]}
  onChange={handleChange}
  isError={false}
  customSearch={customSearch}
  label={'label'}
  isDisplayLabel={true}
  onIsSearchingChange={handleIsSearchingChange}
/>

Selected/disabled options

<AutocompleteMultiple
  options={[
    {
      id: 6,
      label: 'disabled ',
      selected: true,
      disabled: true
    }
  ]}
/>

Select accounts

Sélectionner

Select countries

Sélectionner

Error

<AutocompleteMultiple
  isError={true}
  options={[
    {
      id: 1,
      label: 'Adrien',
      selected: true
    }
  ]}
/>

Sélectionner

Sélectionner

Custom search

const VALUES = [
  {
    id: 1,
    label: 'Have props',
    test: 'test',
    code: 'un code',
    value: 999
  },
  {
    id: 2,
    label: 'Adam'
  },
  {
    id: 3,
    label: 'Julian'
  },
  {
    id: 4,
    label: 'Mohamed'
  }
];

const handleChange = (list) => {
  setListSelected(list);
};

const customSearch = (text, list) => {
  return list.filter((l) => l?.label?.startsWith('A'));
};

return (
  <AutocompleteMultiple
    options={VALUES}
    onChange={handleChange}
    customSearch={customSearch}
  />
);

Custom search

Sélectionner

List Selected :

[]

Display label

<AutocompleteMultiple
  isDisplayLabel={false}
  options={[
    {
      id: 1,
      label: 'Adrien',
      selected: true
    }
  ]}
/>

Sélectionner

onIsSearchingChange

<AutocompleteMultiple
  onIsSearchingChange={(isSearching) => {
    console.log('ISSEARCHING', isSearching);
  }}
  options={[
    {
      id: 1,
      label: 'Adrien',
      selected: true
    }
  ]}
/>

Sélectionner

Sélectionner

Props

| Name | Type | Required | Default | Description | | -------------------- | ------------------ | -------- | -------------------------- | ----------------------------------------------------------------------------------------------------- | --- | | onChange | function | No | (list)=>{} | Return list of options, triggered on every selection list selected | | isDisabled | bool | No | false | If true, the component is disabled. | | label | string | No | Selectionnez | Top label in input | | customSearch | function | No | (text, list)=>{} : array | Apply custom filter, return new array must contains at least array of ids [id:12] filtered and sorted | | isError | bool | No | false | Set error style | | options | Array | No | [] | List of objects.{label : string, id : string/number, , selected : bool, disabled : bool} | | isDisplayLabel | bool | No | true | Display label or not | | onIsSearchingChange | function | No | (bool)=>{} | Return true/false if suggestList is open ot not | | isOptionsMutable | bool | No | false | if true, it changes the values of the options passed in parameter | | oneRowMode | bool | No | false | if true autocomplete input will takes 1 line max |

InputProps	StandardInputProps	No	{}	props for materialUI InputProps
options : label	string	Yes	''	Label of item
options : id	number/string	Yes	``	Unique id of item
options : selected	bool	No	false	set true to set default checked
options : disabled	bool	No	false	Disabled selection/unselection of item
options : optionType	string	No	default	List of object to define type of option: default, primary, secondary, error, info, success, warning