React Migration in Autocomplete Component

This section explains how to migrate the Autocomplete component from EJ2 React to React. It provides a detailed comparison of APIs, including props and events.

Properties

EJ2 ReactReactDescription

Props: autofill

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} autofill={true}></AutoCompleteComponent>

Props: autofill

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} autofill={true}></Autocomplete>

The autofill prop is supported in both EJ2 React and React.

Props: cssClass

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} cssClass="custom-autocomplete"></AutoCompleteComponent>

Props: className

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} className="custom-autocomplete"></Autocomplete>

The cssClass prop in EJ2 React is replaced by className in React.

Props: dataSource

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries}></AutoCompleteComponent>

Props: dataSource

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries}></Autocomplete>

The dataSource prop is supported in both EJ2 React and React.

Props: fields

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' }, { Name: 'Canada', Code: 'CA' } ]; <AutoCompleteComponent dataSource={countryData} fields={{ value: 'Name' }}></AutoCompleteComponent>

Props: fields

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' }, { Name: 'Canada', Code: 'CA' } ]; <Autocomplete dataSource={countryData} fields={{ value: 'Name' }}></Autocomplete>

The fields prop is supported in both EJ2 React and React.

Props: allowCustom

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} allowCustom={true}></AutoCompleteComponent>

Props: customValue

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} customValue={true}></Autocomplete>

The allowCustom prop in EJ2 React is replaced by customValue in React.

Props: highlight

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} highlight={true}></AutoCompleteComponent>

Props: autoHighlight

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} autoHighlight={true}></Autocomplete>

The highlight prop in EJ2 React is replaced by autoHighlight in React.

Props: minLength

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} minLength={2}></AutoCompleteComponent>

Props: minLength

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} minLength={2}></Autocomplete>

The minLength prop is supported in both EJ2 React and React.

Props: placeholder

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} placeholder="Enter a country"></AutoCompleteComponent>

Props: placeholder

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} placeholder="Enter a country"></Autocomplete>

The placeholder prop is supported in both EJ2 React and React.

Props: filterType

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} filterType="StartsWith"></AutoCompleteComponent>

Props: filterType

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} filterType="StartsWith"></Autocomplete>

The filterType prop is supported in both EJ2 React and React.

Props: ignoreCase

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} ignoreCase={false}></AutoCompleteComponent>

Props: ignoreCase

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} ignoreCase={false}></Autocomplete>

The ignoreCase prop is supported in both EJ2 React and React.

Props: ignoreAccent

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} ignoreAccent={true}></AutoCompleteComponent>

Props: ignoreAccent

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} ignoreAccent={true}></Autocomplete>

The ignoreAccent prop is supported in both EJ2 React and React.

Props: showClearButton

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} showClearButton={true}></AutoCompleteComponent>

Props: clearButton

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} clearButton={true}></Autocomplete>

The showClearButton prop in EJ2 React is replaced by clearButton in React.

Props: suggestionCount

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} suggestionCount={10}></AutoCompleteComponent>

Props: maxSuggestions

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} maxSuggestions={10}></Autocomplete>

The suggestionCount prop in EJ2 React is replaced by maxSuggestions in React.

Props: floatLabelType

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} placeholder="Enter a country" floatLabelType="Auto"></AutoCompleteComponent>

Props: labelMode

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} placeholder="Enter a country" labelMode="Auto"></Autocomplete>

The floatLabelType prop in EJ2 React is replaced by labelMode in React.

Props: enableRtl

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} enableRtl={true}></AutoCompleteComponent>

Props: dir (via Provider)

const countries = ['Australia', 'Bermuda', 'Canada']; <Provider dir="rtl"> <Autocomplete dataSource={countries}></Autocomplete> </Provider>

The enableRtl prop is supplied via dir="rtl" on a Provider in React.

Props: locale

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} locale='en-US'></AutoCompleteComponent>

Props: locale (via Provider)

const countries = ['Australia', 'Bermuda', 'Canada']; <Provider locale='en-US'> <Autocomplete dataSource={countries}></Autocomplete> </Provider>

The locale prop is supplied via a Provider in React.

Props: readonly

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} readonly={true}></AutoCompleteComponent>

Props: readOnly

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} readOnly></Autocomplete>

The readonly prop in EJ2 React is readOnly in React.

Props: value

const countries = ['Australia', 'Bermuda', 'Canada']; const selectedValue = 'Australia'; <AutoCompleteComponent dataSource={countries} value='Australia'></AutoCompleteComponent>

Props: value

const countries = ['Australia', 'Bermuda', 'Canada']; const selectedValue = 'Australia'; <Autocomplete dataSource={countries} value={selectedValue}></Autocomplete>

The value prop is supported in both EJ2 React and React.

Props: debounceDelay

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} debounceDelay={300}></AutoCompleteComponent>

Props: debounceDelay

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} debounceDelay={300}></Autocomplete>

The debounceDelay prop is supported in both EJ2 React and React.

Props: headerTemplate

const countries = ['Australia', 'Bermuda', 'Canada']; const HeaderTemplate = () => <div>Select a Country</div>; <AutoCompleteComponent dataSource={countries} headerTemplate={<HeaderTemplate />}></AutoCompleteComponent>

Props: headerTemplate

const countries = ['Australia', 'Bermuda', 'Canada']; const HeaderTemplate = () => <div>Select a Country</div>; <Autocomplete dataSource={countries} headerTemplate={<HeaderTemplate />}></Autocomplete>

The headerTemplate prop accepts a React node to render the dropdown header.

Props: footerTemplate

const countries = ['Australia', 'Bermuda', 'Canada']; const FooterTemplate = () => <div>Add New</div>; <AutoCompleteComponent dataSource={countries} footerTemplate={<FooterTemplate />}></AutoCompleteComponent>

Props: footerTemplate

const countries = ['Australia', 'Bermuda', 'Canada']; const FooterTemplate = () => <div>Add New</div>; <Autocomplete dataSource={countries} footerTemplate={<FooterTemplate />}></Autocomplete>

The footerTemplate prop accepts a React node to render the dropdown footer.

Props: itemTemplate

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const ItemTemplate = ({ data }) => <span>{data.Name} - {data.Code}</span>; <AutoCompleteComponent dataSource={countryData} fields={{ value: 'Name' }} itemTemplate={<ItemTemplate />}></AutoCompleteComponent>

Props: itemTemplate

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const ItemTemplate = ({ data }) => <span>{data.Name} - {data.Code}</span>; <Autocomplete dataSource={countryData} fields={{ value: 'Name' }} itemTemplate={<ItemTemplate />}></Autocomplete>

The itemTemplate prop accepts a React node to render each suggestion item.

Props: noRecordsTemplate

<AutoCompleteComponent dataSource={[]} noRecordsTemplate={<div>No records found</div>}></AutoCompleteComponent>

Props: noRecordsTemplate

<Autocomplete dataSource={[]} noRecordsTemplate={<div>No records found</div>}></Autocomplete>

The noRecordsTemplate prop accepts a React node for the no-records message.

Props: valueTemplate

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const ValueTemplate = ({ data }) => <span>{data.Code}</span>; <AutoCompleteComponent dataSource={countryData} fields={{ value: 'Name' }} valueTemplate={<ValueTemplate />}></AutoCompleteComponent>

Props: valueTemplate

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const ValueTemplate = ({ data }) => <span>{data.Code}</span>; <Autocomplete dataSource={countryData} fields={{ value: 'Name' }} valueTemplate={<ValueTemplate />}></Autocomplete>

The valueTemplate prop accepts a React node to render the selected value.

Props: groupTemplate

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const GroupTemplate = ({ data }) => <div>{data.items[0].Code}</div>; <AutoCompleteComponent dataSource={countryData} groupTemplate={<GroupTemplate />}></AutoCompleteComponent>

Props: groupTemplate

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const GroupTemplate = ({ data }) => <div>{data.items[0].Code}</div>; <Autocomplete dataSource={countryData} groupTemplate={<GroupTemplate />}></Autocomplete>

The groupTemplate prop accepts a React node to render group headers.

Props: allowObjectBinding

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const selectedObj = { Name: 'Australia', Code: 'AU' }; <AutoCompleteComponent dataSource={countryData} value={selectedObj} allowObjectBinding={true}></AutoCompleteComponent>

Props: allowObjectBinding

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; const selectedObj = { Name: 'Australia', Code: 'AU' }; <Autocomplete dataSource={countryData} value={selectedObj} allowObjectBinding={true}></Autocomplete>

The allowObjectBinding prop is supported in both EJ2 React and React.

Props: sortOrder

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} sortOrder="Ascending"></AutoCompleteComponent>

Props: sortOrder

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} sortOrder={SortOrder.Ascending}></Autocomplete>

The sortOrder prop is supported in both EJ2 React and React.

Props: width

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} width='100%'></AutoCompleteComponent>

Props: style

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} style={{ width: '100%' }}></Autocomplete>

The width prop in EJ2 React is replaced by style in React.

Props: enabled

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} enabled={false}></AutoCompleteComponent>

Props: disabled

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} disabled></Autocomplete>

The enabled prop in EJ2 React is inverted as disabled in React.

Props: required

const countries = ['Australia', 'Bermuda', 'Canada']; <AutoCompleteComponent dataSource={countries} required={true}></AutoCompleteComponent>

Props: required

const countries = ['Australia', 'Bermuda', 'Canada']; <Autocomplete dataSource={countries} required></Autocomplete>

The required prop is supported in both EJ2 React and React.

Events

EJ2 ReactReactDescription

Event: change

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChange = (args) => { console.log('Value changed:', args.value); }; <AutoCompleteComponent dataSource={countries} change={handleChange}></AutoCompleteComponent>

Event: onChange

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChange = (args) => { console.log('Value changed:', args.value); }; <Autocomplete dataSource={countries} onChange={handleChange}></Autocomplete>

The change event in EJ2 React is replaced by onChange in React and fires on value change.

Event: select

const countries = ['Australia', 'Bermuda', 'Canada']; const handleSelect = (args) => { console.log('Item selected:', args.itemData); }; <AutoCompleteComponent dataSource={countries} select={handleSelect}></AutoCompleteComponent>

Event: onChange

const countries = ['Australia', 'Bermuda', 'Canada']; const handleSelect = (args) => { console.log('Item selected:', args.itemData); }; <Autocomplete dataSource={countries} onChange={handleSelect}></Autocomplete>

The select event in EJ2 React is replaced by onChange in React and fires when an item is chosen.

Event: customValueSpecifier

const countries = ['Australia', 'Bermuda', 'Canada']; const handleCustomValue = (args) => { console.log('Custom value:', args.value); }; <AutoCompleteComponent dataSource={countries} allowCustom={true} customValueSpecifier={handleCustomValue}></AutoCompleteComponent>

Event: onCustomValueSelect

const countries = ['Australia', 'Bermuda', 'Canada']; const handleCustomValue = (value) => { console.log('Custom value:', value); }; <Autocomplete dataSource={countries} customValue={true} onCustomValueSelect={handleCustomValue}></Autocomplete>

The customValueSpecifier event in EJ2 React is replaced by onCustomValueSelect in React and fires on committed custom value.

Event: filtering

const countries = ['Australia', 'Bermuda', 'Canada']; const handleFiltering = (args) => { console.log('Filtering:', args.text); }; <AutoCompleteComponent dataSource={countries} filtering={handleFiltering}></AutoCompleteComponent>

Event: onFilter

const countries = ['Australia', 'Bermuda', 'Canada']; const handleFilter = (args) => { console.log('Filtering:', args.text); }; <Autocomplete dataSource={countries} onFilter={handleFilter}></Autocomplete>

The filtering event in EJ2 React is replaced by onFilter in React and fires during typing-based filtering.

Event: open

const countries = ['Australia', 'Bermuda', 'Canada']; const handleOpen = (args) => { console.log('Popup opened'); }; <AutoCompleteComponent dataSource={countries} open={handleOpen}></AutoCompleteComponent>

Event: onOpen

const countries = ['Australia', 'Bermuda', 'Canada']; const handleOpen = (args) => { console.log('Popup opened'); }; <Autocomplete dataSource={countries} onOpen={handleOpen}></Autocomplete>

The open event in EJ2 React is replaced by onOpen in React and fires on popup open.

Event: close

const countries = ['Australia', 'Bermuda', 'Canada']; const handleClose = (args) => { console.log('Popup closed'); }; <AutoCompleteComponent dataSource={countries} close={handleClose}></AutoCompleteComponent>

Event: onClose

const countries = ['Australia', 'Bermuda', 'Canada']; const handleClose = (args) => { console.log('Popup closed'); }; <Autocomplete dataSource={countries} onClose={handleClose}></Autocomplete>

The close event in EJ2 React is replaced by onClose in React and fires on popup close.

Event: focus

const countries = ['Australia', 'Bermuda', 'Canada']; const handleFocus = (args) => { console.log('Component focused'); }; <AutoCompleteComponent dataSource={countries} focus={handleFocus}></AutoCompleteComponent>

Event: onFocus

const countries = ['Australia', 'Bermuda', 'Canada']; const handleFocus = (args) => { console.log('Component focused'); }; <Autocomplete dataSource={countries} onFocus={handleFocus}></Autocomplete>

The focus event in EJ2 React is replaced by onFocus in React and fires on focus.

Event: blur

const countries = ['Australia', 'Bermuda', 'Canada']; const handleBlur = (args) => { console.log('Component blurred'); }; <AutoCompleteComponent dataSource={countries} blur={handleBlur}></AutoCompleteComponent>

Event: onBlur

const countries = ['Australia', 'Bermuda', 'Canada']; const handleBlur = (args) => { console.log('Component blurred'); }; <Autocomplete dataSource={countries} onBlur={handleBlur}></Autocomplete>

The blur event in EJ2 React is replaced by onBlur in React and fires on blur.