Code
Autocomplete is basically a wrapper for Select2. THIS COMPONENT IS INCOMPLETE. The API is extremely unstable, so use at own risk and watch the release notes carefully...
Single select
<div class="ace-form-group ace-form-group-autocomplete">
<div class="ace-form-item ace-form-item-label">
<label for="autocomplete-single-autocomplete-select" class="ace-form-label">Single select autocomplete</label>
</div>
<div class="ace-form-item ace-form-item-autocomplete">
<div class="ace-autocomplete" id="autocomplete-single">
<select class="ace-form-input ace-form-input-select ace-form-field-medium" id="autocomplete-single-autocomplete-select">
<option value="foo">Foo</option>
<option value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
<optgroup label="Misc">
<option value="foobar">Foo Bar</option>
<option selected="selected" value="rawr">Rawr</option>
</optgroup>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
</optgroup>
<option value="foo">Foo</option>
<option value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
<option value="foo">Foo</option>
<option value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
<option value="foo">Foo</option>
<option value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
<option value="foo">Foo</option>
<option value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
<option value="foo">Foo</option>
<option value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
</select>
</div>
</div>
</div>Multiple select
<div class="ace-form-group ace-form-group-autocomplete">
<div class="ace-form-item ace-form-item-label">
<label for="autocomplete-multiple-autocomplete-select" class="ace-form-label">Multi select autocomplete</label>
</div>
<div class="ace-form-item ace-form-item-autocomplete">
<div class="ace-autocomplete" id="autocomplete-multiple">
<select class="ace-form-input ace-form-input-select ace-form-field-medium" id="autocomplete-multiple-autocomplete-select" multiple="multiple">
<option value="foo">Foo</option>
<option selected="selected" value="bar">Bar (selected)</option>
<option value="sin">Sin</option>
<optgroup label="Misc">
<option value="foobar">Foo Bar</option>
<option selected="selected" value="rawr">Rawr</option>
</optgroup>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
</optgroup>
</select>
</div>
</div>
</div>Dynamically loaded
<div class="ace-form-group ace-form-group-autocomplete">
<div class="ace-form-item ace-form-item-label">
<label for="dynamicselector-autocomplete-select" class="ace-form-label">Dynamically loaded autocomplete</label>
</div>
<div class="ace-form-item ace-form-item-autocomplete">
<div class="ace-autocomplete" data-ace-autoinit="false" id="dynamicselector">
<select class="ace-form-input ace-form-input-select ace-form-field-medium" id="dynamicselector-autocomplete-select">
</select>
</div>
</div>
</div>Javascript for dynamically loaded example
$(function() {
'use strict';
var data = [
{ text: 'Fruit', children: [{ id: 0, text: 'Apples' }, { id: 1, text: 'Oranges', selected: true }] },
{ text: 'Vegetables', children: [{ id: 2, text: 'Carrot' }, { id: 3, text: 'Pumpkin' }, { id: 4, text: 'Squash' }] },
{ id: 10, text: 'Foo bar' }
];
ACE.Autocomplete.init('#dynamicselector', { data: data });
});
Single select with placeholder
<div class="ace-form-group ace-form-group-autocomplete">
<div class="ace-form-item ace-form-item-label">
<label for="autocomplete-single-placeholder-js-autocomplete-select">Single select autocomplete with placeholder</label>
</div>
<div class="ace-form-item ace-form-item-autocomplete">
<div class="ace-autocomplete" id="autocomplete-single-placeholder-js">
<select class="ace-form-input ace-form-input-select ace-form-field-medium" id="autocomplete-single-placeholder-js-autocomplete-select">
<option value=""></option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="sin">Sin</option>
</select>
</div>
</div>
</div>Ensure there is an empty item in the options, or Select2 will not add the Placeholder.
Javascript for placeholder
ACE.Autocomplete.init('#autocomplete-single-placeholder-js', {
placeholder: 'Placeholder set with JS'
});