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:
    %AUTOCOMPLETE{ name="Mood" value="Indifferent" options="Happy, Indifferent, Sad" size="10" }%
  • Category: ApplicationsAndComponentsVariables, DatabaseAndFormsVariables, EditingAndContentUpdateVariables, FormattingAndRenderingVariables
  • Related: AutocompletePlugin, TWikiForms
Edit | Attach | Watch | Print version | History: r16 < r15 < r14 < r13 < r12 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r16 - 2015-05-29 - PeterThoeny
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.