The ComboBox supports the autofill behaviour with the help
of autofill property. Whenever you change the input value,
the ComboBox will autocomplete your data by matching the typed character. Suppose, if no matches
found then, comboBox doesn’t suggest any item.
In the following sample, showcase that how to work autofill with ComboBox.
import { ComboBox } from '@syncfusion/ej2-dropdowns';
// defined the array of data
let sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
// initialize ComboBox component
let comboBoxObject: ComboBox = new ComboBox({
//set the data to dataSource property
dataSource: sportsData,
// enable the autofill behavior.
autofill: true,
// set placeholder to ComboBox input element
placeholder: "Select a game"
});
// render initialized ComboBox
comboBoxObject.appendTo('#comboelement');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 ComboBox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:50px auto 0; width:250px;">
<br>
<input type="text" tabindex="1" id='comboelement' />
</div>
</body>
</html>