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
    }
  ]}
/>

Sélectionner

Sélectionner

Error

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

Sélectionner

Sélectionner

Custom search

const VALUES = [
  {
    label: 'Have props',
    test: 'test',
    code: 'un code',
    value: 999
  },
  {
    label: 'Adam'
  },
  {
    label: 'Julian'
  },
  {
    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 :

[]

Disaply 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
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
---	---	---	---	---
options : label	string	Yes	''	Label of item
options : id	number/string	No	generatedId	Unique id of item, if not set a random id is generated
options : selected	bool	No	false	set true to set default checked
options : disabled	bool	No	false	Disabled selection/unselection of item