Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@factorbi/component-autocomplete

TechPanama2ISC0.0.4

Input form with suggestions.

factorbi, helper

readme

React component <Autocomplete />

How to use

Installation

> npm i @factorbi/component-autocomplete

Component

Example:

import Autocomplete from '@factorbi/component-autocomplete';

export default class Reports extends React.Component {

    constructor() {
        this.state = {
            client: undefined,
            // When api is call, here an example data:
            arrClientData: [
                {id: 941, value:'Estudiantes de Primaria'},
                {id: 945, value:'Estudiantes de … técnico'},
                {id: 949, value:'Estudiantes de …versidad'}
            ]
        };
        this.handleAutocomplete = this.handleAutocomplete.bind(this);
        this.handleGetValue = this.handleGetValuer(this);
    }

    handleAutocomplete(e) {
        const { value, name } = e.target;
        // Here call api
        // example line: this.props.dispatch(actions.getStringSearch(jwt, value, name));
    }

    handleGetValue(name, value) {
        this.setState({ [name]: value });
    }

    render() {
        return (
            <Autocomplete
                id="inputClients"
                idList="slcClients"
                name="client"
                minimum={ 3 }
                label="Clients"
                dataType="client"
                placeholder="Search clients"
                data={ this.state.arrClientData }
                onChange={ this.handleAutocomplete }
                onGetValue={ this.handleGetValue }
            />
        );
    }
}