The AutoComplete control derives from the ComboBox and modifies it as follows:
ComboBox | AutoComplete |
---|---|
Has a static look up list. | Filters the list dynamically as the user types. Also allows you to provide the items dynamically. |
Has a fixed look-up algorithm, that is, it always looks for items that start with the string typed by the user. | Looks for items that contain the string typed by the user. |
Displays items as plain text. | Displays items as HTML, allowing it to highlight the matching portions of the items containing matches. |
These samples use the WjAutoComplete component and Angular 2.
The AutoComplete control below uses a string array as its itemsSource. As you type, the drop-down shows a list of items from the array that contain the text you typed. Notice that you can type multiple search terms. For example, 'un st' matches 'United States.'
Selected Index: {{ac1.selectedIndex}}
Selected Item: {{ac1.selectedItem}}
The AutoComplete control below uses a CollectionView as its itemsSource, and 'country' as its displayMemberPath. The main difference between this example and the previous is that in this case each item is a full object, whereas in the previous example it was just a string.
Note that the AutoComplete applies a filter to the collection view as you type, so if other controls are bound to the same collection view, they also show the filtered data. If you want to avoid this, create a separate collection view for the AutoComplete.
Selected Index: {{ac2.selectedIndex}}
Selected Item: {{ac2.selectedItem | json}}
This AutoComplete does not have a static list of items. Instead, it uses the itemsSourceFunction property to specify a function that makes an Ajax call and returns items asynchronously. In this case, the items contain company data from a catalog with over 6,000 items. Real applications could use SQL queries to look up items from tables with millions of items.
This AutoComplete also uses the cssMatch property to highlight the matches with a yellow background instead of using the default bold.
Selected Index: {{acAsync.selectedIndex}}
Selected Item: {{acAsync.selectedItem | json}}
Selected Value: {{acAsync.selectedValue}}