AutoComplete

Introduction

The AutoComplete control is used for single-row text input like the TextField control and can be used as such. The difference to the TextField control is the possibility to add suggestion values which help the user during the text input. During typing a list with suggestions is displayed which can directly be selected by the user. The suggestions can be defined via the aggregation items of type sap.ui.core.ListItem.

Examples

The following examples use some sample data which looks like follows:

			var aData = [
				{name: "Dente, Al", userid: "U01"},
				{name: "Friese, Andy", userid: "U02"},
				{name: "Mann, Anita", userid: "U03"},
				{name: "Schutt, Doris", userid: "U04"},
				{name: "Open, Doris", userid: "U05"},
				{name: "Dewit, Kenya", userid: "U06"},
				{name: "Zar, Lou", userid: "U07"},
				{name: "Burr, Tim", userid: "U08"},
				{name: "Hughes, Tish", userid: "U09"},
				{name: "Town, Mo", userid: "U10"},
				{name: "Case, Justin", userid: "U11"},
				{name: "Time, Justin", userid: "U12"},
				{name: "Barr, Sandy", userid: "U13"},
				{name: "Poole, Gene", userid: "U14"},
				{name: "Ander, Corey", userid: "U15"},
				{name: "Early, Brighton", userid: "U16"},
				{name: "Noring, Constance", userid: "U17"},
				{name: "O'Lantern, Jack", userid: "U18"},
				{name: "Tress, Matt", userid: "U19"},
				{name: "Turner, Paige", userid: "U20"}
			];
		

Predefined items

This example creates two AutoComplete controls with a fixed predefined set of suggestion items. The first one is initialized manually via the API functions. The second one uses data binding.


Dynamic items

The following example shows two AutoComplete controls for which the suggestion items are created dynamically when they are needed. For this purpose the suggest event can be used to check the current user input. The items for the first control are added incrementally starting with an empty item list. The item list in the second control is recreated each time. This is useful when the suggestions are quite specific for the current input and it makes sense no sense to keep them for a longer time.


The following examples are the same as above but the items are added asynchronously (in the examples timeouts are used, in reality this would be some asychronous calls). To ensure that no invalid suggestions are shown a check should be introduced whether the value of the control is still the same.


Custom filter function

By default the AutoComplete control only shows the items which texts begins with the value the user has typed (case insensitive). But it is possible to provide a custom filter function. In the following example it is possible to either type in a name or user id.

API Documentation

See API documentation