Fork me on GitHub

Textbox List

Displays users' choices to them as a graphic list.


Getting Started

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

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

Then initialize AlloyUI and load the Textbox List module.

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

Using Textbox List

Create an HTML element:

<div id="myList"></div>

Now create a new instance of Textbox List component, then tell contentBox where it's going to be attached and populate some suggestions by adding a simple JavaScript array to dataSource. Finally, let's render it!

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

Configuring Textbox List

There are some other options that you can pass to your Textbox List instance.

For example, if you set typeAhead to true, the input field should be automatically updated with the first result as the user types, automatically selecting the portion of the text the user has not typed yet.

AUI().use(
  'aui-textboxlist',
  function(A) {
    var textboxlist = new A.TextboxList(
      {
        contentBox: '#myList',
        dataSource: ['America', 'Europe', 'Asia'],
        typeAhead: true
      }
    ).render();
  }
);

You can even define a more specific schema and add the matchKey option to choose the key or numeric index on the schema to match the result against.

var states = [
  ['AL', 'Alabama', 'The Heart of Dixie'],
  ['MA', 'Massachusetts', 'The Spirit of America'],
  ['WY', 'Wyoming', 'Like No Place on Earth']
];

AUI().use(
  'aui-textboxlist',
  function(A) {
    var textboxlist = new A.TextboxList(
      {
        contentBox: '#myList'
        dataSource: states,
        matchKey: 'name',
        schema: {
          resultFields: ['key', 'name', 'description']
        }
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.