<form id="test-form"> <!-- JQuery autocomplete tester --> <h2>JQuery Accessible Auto-complete Combobox</h2> <div class="form-group"> <label for="combobox" class="control-label">Combobox</label> <input type="text" name="form[combobox_name]" id="form_combobox_name" class="js-combobox form-control" list="combobox_list" placeholder="Begin typing to see a filtered list" data-combobox-prefix-class="combobox" data-combobox-case-sensitive="no" data-combobox-search-option="containing" data-combobox-allow-suggestion-on-empty="true" value="" /> <datalist id="combobox_list"> <option value="Test A" /> <option value="Test B" /> <option value="test C" /> <option value="testing D" /> <option value="Foo" /> <option value="Bar" /> <option value="Tester 123" /> </datalist> <!-- Complete content of combobox --> <input type="hidden" id="form_combobox_crosswalk" value='{"Test A":0,"Test B":1,"test C":2,"testing D":3,"Foo":4,"Bar":5,"Tester 123":6}' /> <!-- The JQuery accessible combobox doesn't allow for an id to be present in the value attribute --> <!-- so we use this hidden input to store the selected id --> <!-- the selected id is found after the combobox loses focus by finding the selected item in the crosswalk json --> <input type="hidden" id="form_combobox_id" name="form[combobox_id]" value="" aria-required="true" data-validation="js-combobox" data-validation-error="Please select an item!" /> </div> </form>