customized-autocomplete
Version:
Generalized version of mui autocomplete
58 lines (45 loc) • 3.26 kB
Markdown
This package can be used in your react applications for autocomplete search
This package uses standard mui autocomplete of react.
You can use standart npm package installation
```bash
npm i customized-autocomplete
```
```react
import CustomizedAutocomplete from 'customized-autocomplete';
//...
render() {
return (
<React.Fragment>
//your other html here
<CustomizedAutocomplete
//..........
/>
//your other html here
</React.Fragment>
);
}
}
```
| Parameter |Required| Default Value | Description |
| ----------- | ------ | -------------- | ----------- |
| selectedValue | true | - | selection value of the autocomplete |
| handleChange | true | - | when selection is made this function is triggered. Ex. Format : (event, selection) => { console.log(event,selection); } |
| selectionType | false | "api" | define whether data is supplied statically or from an api method. can be either "api" or "static" |
| optionApiMethod | vary | - | when selectionType is "api" this method must be supplied from an api method. return type is list of {value,label} pair. |
| optionData | vary | - | when selectionType is "static" this parameter must be supplied as list of {value,label} pair |
| onBlur | false | null | will be triggered after onBlur event Ex. Usage : (fieldName,e) => {console.log(fieldName,i)}|
| error | false | null | can be used as validation for autocomplete. do not supply if validation is not needed |
| touched | false | null | can be used as validation for autocomplete. do not supply if validation is not needed |
| fieldName | true | - | name of the value will be set from parent component |
| noOptionsText | true | - | text will appear when no options are available |
| inputLabel | true | - | input label appear in top of the component |
| setStopBlocking | false | null | define whehter ui blocking will be applied when searching |
| loadOptionsAfterSelection | false | false | define whehter options will be reloaded after a selection is made |
| clearOnNull | false | false | define whehter input should be cleared when selection value is set to null by parent component |
| inputName | false | "secim" | the name of the text input inside the autocomplete |
[](https //choosealicense.com/licenses/mit/)