%META:TOPICINFO{author="TWikiContributor" date="1413584650" format="1.1" version="$Rev$"}%
%META:TOPICPARENT{name="TWikiVariables"}%
#VarAUTOCOMPLETE
---+++ 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 =%<nop>AUTOCOMPLETE{}%= variable is handled by the AutocompletePlugin.
   * Syntax: =%<nop>AUTOCOMPLETE{ name="..." value="..." options="..., ..." }%=
   * Parameters:%STARTSECTION{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: %BR% =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: %BB% =type=""= (empty): Simple autocomplete %BB% =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. %BB% =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. %BB% =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?"= |%ENDSECTION{parameters}%
   * Example:
     %BR% =&lt;form action="..."&gt;=
     %BR% =%<nop>AUTOCOMPLETE{ name="Mood" value="Indifferent" options="Happy, Indifferent, Sad" size="10" }%=
     %BR% =&lt;form&gt;=
   * Expands to: <form action="#">%AUTOCOMPLETE{ name="Mood" value="Indifferent" options="Happy, Indifferent, Sad" size="10" }%<form>
   * Category: ApplicationsAndComponentsVariables, DatabaseAndFormsVariables, EditingAndContentUpdateVariables, FormattingAndRenderingVariables
   * Related: AutocompletePlugin, %SYSTEMWEB%.TWikiForms
