# AutoComplete Overview

Learn about Wijmo's AutoComplete component in this documentation topic

## Content

The __AutoComplete__ control is an input control that allows you to select from a dropdown list of suggestions as the user types. From functionality and architecture point of view, it extends the __ComboBox__ control to provide two additional features:

1. Autocomplete automatically filters the items in the drop-down list to include only those items that match the current user input. 
2. Autocomplete populates the drop-down asynchronously based on the current user input and changes the search logic. By default, the ComboBox looks for items that start with the user input, while AutoComplete looks for items that contain the user input.

The __AutoComplete__ control is populated with items using the __itemsSource__ property.

![AutoComplete](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/input/ac-overview.gif)

The example below creates an AutoComplete control and populates it using a 'countries' array. As the user types, AutoComplete searches for the country, and narrows down the list according to the current input.

#### HTML
```html
<label for="theAutoComplete">AutoComplete:</label>
<br/>
<div id="theAutoComplete"></div>
```
#### Javascript

```javascript
import * as input from '@mescius/wijmo.input';
import { getData } from './data';

function init() {    
    let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
        displayMemberPath: 'country',
        itemsSource: getData()
    });
}
```

### Add Items Automatically

User can dynamically add items to the AutoComplete itemsSource, by setting the __isEditable__ property to __True__ and by handling the __lostFocus__ event. As soon as the user types in a value that does not exist in the itemsSource and moves the focus away from the control, the lostFocus event appends the typed item to the array assigned as the itemsSource of the control.

![AutoComplete](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/input/ac-autoadd-item.gif)

##### Javascript

```javascript
import * as wijmo from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';

function init() {
    let countries = new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']);

    new input.AutoComplete('#theAutoComplete', {
        itemsSource: countries,
        lostFocus: lostFocus
    });

    // add item to the list when a control loses focus
    function lostFocus(sender) {
        let item = sender.text;
        if (item && countries.indexOf(item) < 0) {
            countries.push(item);
        }
    }
}
```