PrimeTek UI Component Libraries
React AutoComplete

React AutoComplete

PrimeTek's photo
PrimeTek
·

3 min read

React AutoComplete is an input component that provides real-time suggestions when being typed.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { AutoComplete } from 'primereact/autocomplete';

Getting Started

AutoComplete is used as a controlled component with value and onChange properties. In addition, the component requires a list of suggestions and a completeMethod to query the results.

<AutoComplete value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry(e.value)} />

const countries = // datasource

const searchCountry = (event) => {
    let filteredCountries = //suggestions
    setFilteredCountries(filteredCountries);
}

render() {
    return (
        <AutoComplete value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} onChange={(e) => setSelectedCountry(e.value)} />
    );
}

Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes "blank" or "current" as possible values. "blank" is the default mode to send a query with an empty string whereas "current" setting sends a query with the current value of the input.

<AutoComplete dropdown value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} onChange={(e) => setSelectedCountry(e.value)} />

Multiple Mode

Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.

<AutoComplete multiple value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} onChange={(e) => setSelectedCountry(e.value)} />

Objects

AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object that has name and code fields such as {name:"United States",code:"USA"}.

<AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} onChange={(e) => setSelectedCountry(e.value)} />

Templating

Custom content can be displayed using itemTemplate property that references a function or JSXElement or string which gets the suggestion option and returns an element. Similarly selectedItemTemplate property is available to customize the chips in multiple mode using the same approach.

<AutoComplete value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />

itemTemplate(item) {
    //return custom element
}

Theming

AutoComplete supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact AutoComplete showcase for demos and documentation.

ReactJavaScriptWeb Development