Autocomplete

Text inputs that offer options as users type

Overview

Autocomplete uses a call to a file to fetch suggested matches using AJAX.

Assign a text input class="auto-complete" to turn an input into an autocomplete field.

Example
WCMS use
MVC.net use
Code
  1. <input class="auto-complete" data-url="autocomplete-address" type="text" name="lookup" id="lookup" value=""/>

Add a data attribute data-url and set it's value to be the url of the script that will query and return suggestions. The script will return an array of JSON objects with id, value and label properties

  • id: the unique id of the item, from database for example
  • value: the value to be populated into the text input
  • label: the value to be displayed in the list of suggestions.
    Can be different to 'value' if additional information is useful in the suggestion, but not in the filled input (as above).

To capture the id in a hidden field (for example, where it helps to have a key for a database update) add a data- attribute with the name of a related hidden field:

  • data-assoc-input="id_of_hidden_field"

Autocombo

Autocombo refers to an autocomplete that allows multiple values to be added and/or created, with management to remove selected options.

This control is experimental insofar that it does not natively fall back to an accessible alternative other than a standard text input.

To build up a non-javascript version, you will need to allow users to input text, then capture the button click server-side. To assist this, all buttons in the autocombo should be set to type="submit" so that they will trigger a form submission.

Selected Suppliers

  1. <div class="row auto-combo" id="suppliermanager" data-url="autocomplete-address" data-url-create="" data-label="Supplier" data-prefix="supplier-" data-seperator=":">
  2. <label for="suppliers">Suppliers</label>
  3. <span class="help"></span>
  4. <div class="input-append">
  5. <input class="autocomplete" type="text" name="suppliers" id="suppliers" value=""/>
  6. <button type="submit" class="medium grey button action" id="supplieraction"></button>
  7. </div>
  8. <div id="supplierset" class="itemset half-top">
  9. <h4 class="remove-bottom">Selected Suppliers</h4>
  10. <button type="submit" id="supplier-1" title="Remove ACME Solutions" class="small grey button">
  11. ACME Solutions
  12. <i class="icon cancel"></i>
  13. </button>
  14. <button type="submit" id="supplier-24" title="Remove Dot Co." class="small grey button">
  15. Dot Co.
  16. <i class="icon cancel"></i>
  17. </button>
  18. </div>
  19. <input type="hidden" class="newitemlist" name="supplieridlist" id="supplieridlist" value=":1:24:"/>
  20. <input type="hidden" class="curitemlist" name="current_suppliers" id="current_suppliers" value=":1:24:"/>
  21. </div>

Autocombo takes the following data- attributes

  • data-url required the URL of suggestions to fetch (array of JSON objects with id, value and label properties)
  • data-url-create required the URL of a script that will insert a new text input to a database. Returns a JSON object with property 'id'.
  • data-label optional the label for items to be displayed in success/error messages. Default 'item'.
  • data-prefix optional the prefix for naming added entries as buttons. Default 'item-'.
  • data-sep optional character which seperates id's of chosen terms in the 'newitemlist' and 'curitemlist' hidden fields. Default ':'. On form submission, these would typically be split and processed as an array.
Version and status
  • 0.8
  • current version
  • Concept
  • Alpha
  • Beta