create new tag
view all tags

AUTOCOMPLETE{} -- autocomplete input field for use in HTML forms

  • Combo box input field with autocomplete. Start typing to see matching options to pick from. The %AUTOCOMPLETE{}% variable is handled by the AutocompletePlugin.
  • Syntax: %AUTOCOMPLETE{ name="..." value="..." options="..., ..." }%
  • Parameters:
    Parameter Description Default Example
    name Name of input field (required) name="Mood"
    value Form field value "" value="Happy"
    options Comma-space separated list of autocomplete options. Example options when type="values" is used:
    options="1: One, 2: Two, 3: Three" - when a user picks option Three, the input field will have text 3 inserted.
    "" options="Happy, Indifferent, Sad"
    size Size of input field, in number of characters "40" size="20"
    type Types of autocomplete:
    type="" (empty): Simple autocomplete
    type="restrict": Restrict input to list of autocomplete options. The value in the input field will be cleared if it does not match one of the autocomplete options. Partial input is expanded - for example if one of the options is "JavaScript" and the user typed "ja", the input field is expanded to "JavaScript" on focus loss.
    type="values": Define inserted values that are different to the displayed autocomplete options. An autocomplete option is defined as value: title, where the value is the text inserted into the input field when picking the title option.
    type="restrict, values": Types of autocomplete can be combined.
    "" type="restrict"
    id ID of input field (none) id="mood"
    class Add additional class(es) to input field, default is "twikiInputField twikiEditFormTextField autocompleteTextField" "" class="myClass"
    style Add CSS to input field. A width: num; is already added, where num is calculated from the size parameter; the width can be overloaded. "" style="color: blue;"
    selectstyle CSS of select element "" selectstyle="color: blue;"
    containerstyle CSS of autocomplete container div "" containerstyle="font-size: 90%;"
    ... Additional HTML 4 and HTML 5 attributes can be specified for the input field: formname, maxlength, onblur, onfocus, onchange, onselect, onmouseover, onmouseout, pattern, placeholder, spellcheck, tabindex, title   placeholder="How do you feel?"
  • Example:
    <form action="...">
    %AUTOCOMPLETE{ name="Mood" value="Indifferent" options="Happy, Indifferent, Sad" size="10" }%
  • Expands to:
  • Category: ApplicationsAndComponentsVariables, DatabaseAndFormsVariables, EditingAndContentUpdateVariables, FormattingAndRenderingVariables
  • Related: AutocompletePlugin, TWikiForms
Edit | Attach | Watch | Print version | History: r2 < r1 | Backlinks | Raw View | More topic actions
Topic revision: r2 - 2015-06-17 - TWikiAdminUser
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2020 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.VarAUTOCOMPLETE.