Fork me on GitHub

AutoComplete

Provides suggestions while users type into the field.


Getting Started

First load the seed file if you haven't yet.

<script src="https://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>

Then initialize AlloyUI and load the AutoComplete module.

AUI().use(
  'aui-autocomplete',
  function(A) {
    // code goes here
  }
);

Using AutoComplete

Create an HTML element:

<div id="myAutoComplete"></div>

Now create a new instance of AutoComplete component by setting contentBox to our HTML element's selector. Also, we should populate some suggestions by adding a simple JavaScript array to dataSource. Finally, let's render it!

AUI().use(
  'aui-autocomplete',
  function(A) {
    new A.AutoComplete(
      {
        contentBox: '#myAutoComplete',
        dataSource: ['America', 'Europe', 'Asia']
      }
    ).render();
  }
);
Note: you could also use boundingBox, instead of contentBox, to initialize.
Read more about the differences between them.

Configuring AutoComplete

There are some other optional parameters that you can pass to your AutoComplete instance.

For example, you can add support for multiple options by defining a delimChar - character to indicate the beginning or ending of a new value.

AUI().use(
  'aui-autocomplete',
  function(A) {
    new A.AutoComplete(
      {
        contentBox: '#myAutoComplete',
        dataSource: ['America', 'Europe', 'Asia'],
        delimChar: ','
      }
    ).render();
  }
);

Setting typeAhead to true will cause the input field to be automatically updated with the first result as the user types, selecting the portion of the text the user has not typed yet.

AUI().use(
  'aui-autocomplete',
  function(A) {
    new A.AutoComplete(
      {
        contentBox: '#myAutoComplete',
        dataSource: ['America', 'Europe', 'Asia'],
        delimChar: ',',
        typeAhead: true
      }
    ).render();
  }
);

You can even define a more specific schema by adding the matchKey option to match results against a key or numeric index on the schema. In this example, we want to find a match when searching for names of states. The results that appear are defined by the schema as key, name and description.

AUI().use(
  'aui-autocomplete',
  function(A) {
    var states = [
      ['AL', 'Alabama', 'The Heart of Dixie'],
      ['MA', 'Massachusetts', 'The Spirit of America'],
      ['WY', 'Wyoming', 'Like No Place on Earth']
    ];

    new A.AutoComplete(
      {
        contentBox: '#myAutoComplete',
        dataSource: states,
        matchKey: 'name',
        schema: {
          resultFields: ['key', 'name', 'description']
        }
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.