Tags:
component1Add my vote for this tag forms1Add my vote for this tag twiki_application1Add my vote for this tag twiki_form_field1Add my vote for this tag usability1Add my vote for this tag user_interface1Add my vote for this tag create new tag
, view all tags

Autocomplete Plugin

Autocomplete screenshot
Autocomplete input field, for use in TWiki forms and TWiki applications

Introduction

This TWiki plugin adds an autocomplete input field type to TWiki forms and TWiki applications. Start typing to get a list of items to choose from, or click on the pulldown button next to the input field to see all items.

Use Autocomplete in TWikiForms

This package adds an autocomplete type to TWikiForms:

Type Description Size Value
autocomplete screenshot-small Autocomplete input field. Start typing to get a list of items to choose from, or click on the pulldown button to see all items. Size of input field in number of characters Comma-space separated list of autocomplete options
autocomplete+restrict Autocomplete, where input is restricted 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.
autocomplete+values Like autocomplete, allowing definition of 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. For example:
| Field 9 | autocomplete+values | 3 | One, 2: Two, III: Three | Various values formats |
shows autocomplete options
but the inserted values of autocomplete options Two and Three are 2 and III, respectively.
Note: Autocomplete types can be combined: autocomplete+restrict+values

Note: The field attributes M (for mandatory fields), and H (for hidden fields) are supported. In addition, the key="value" parameters of the AUTOCOMPLETE variable can be specified as well, such as style="color: blue;". If combined, the key="value" parameters must be specified after the M and H attributes.

Example form definition:

Name: Type: Size Values: Tooltip message: Attributes:
Marital Status autocomplete+restrict 50 Single, Engaged, Married, It's complicated, Divorced Specify marital status M style="color: blue;"

Use Autocomplete in HTML Forms

You can also use the autocomplete input field directly in your HTML forms, without having to write any code. Just include this in the topic text:

<form action="...">
%AUTOCOMPLETE{ name="Mood" value="Indifferent" options="Happy, Indifferent, Confused, Unhappy, Angry" size="10" }%
<form>
This will show an HTML input field named "Mood" and an autocomplete pulldown when typing.

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?"

Test: (this only works if the AutocompletePlugin is installed and enabled)

%AUTOCOMPLETE{ name="Mood" value="Indifferent" options="Happy, Indifferent, Confused, Unhappy, Angry" size="10" }%

Plugin Installation & Configuration

You do not need to install anything on the browser to use this plugin. These instructions are for the administrator who installs the plugin on the TWiki server.

Note: The older TWiki:Plugins.AutoCompletePlugin (with upper case "C") has similar functionality. This new plugin removes the dependency on the YahooUserInterfaceContrib, and has a simple syntax that is more in line with other TWiki form input types. Use one or the other plugins, they cannot be installed and used together.

  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the Plugins home (see below).
    • Unzip AutocompletePlugin.zip in your twiki installation directory. Content:
      File: Description:
      data/TWiki/AutocompletePlugin.txt Plugin topic
      data/TWiki/VarAUTOCOMPLETE.txt Variable documentation topic
      pub/TWiki/AutocompletePlugin/*.gif and *.png Image files
      lib/TWiki/Plugins/AutocompletePlugin.pm Plugin Perl module
    • Set the ownership of the extracted directories and files to the webserver user.

  • Plugin configuration:
    • Run the configure script and enable the plugin in the Plugins section.

  • If you run TWiki-6.0.1 or older and want to use key="value" parameters in field attributes of TWikiForms, you need to patch the core TWiki. Patch for lib/TWiki/Form.pm:
--- lib/TWiki/Form.pm   (revision 28279)
+++ lib/TWiki/Form.pm   (working copy)
@@ -220,7 +220,10 @@
 # Returns array of arrays
 #   1st - list fields
 #   2nd - name, title, type, size, vals, tooltip, attributes
-#   Possible attributes are "M" (mandatory field)
+# Possible attributes are:
+#   "M" (mandatory field - DEPRECATED - now mandatory="1"),
+#   "H" (hidden field - DEPRECATED - now hidden="1"),
+#   followed by type-specific name="value" configuration pairs
 sub _parseFormDefinition {
     my( $this, $meta, $text, $options ) = @_;
     $options ||= {};
@@ -279,9 +282,27 @@
 
             $tooltip ||= '';
 
+            # Item7577: TWikiForms field types with configure attributes:
+            # Attributes are represented by key="value" parameters.
+            # Example attributes cell: | mandatory="1" style="color: blue;" |
+            # Legacy single character attribute flags M and H are supported as well.
+            # Example attributes cell: | M style="color: blue;" |
+            # results in:
+            # - $attributes: 'M'
+            # - $parameters: TWiki::Attrs object with:
+            #   { mandatory => '1', style => 'color: blue;' }
             $attributes ||= '';
-            $attributes =~ s/\s*//go;
-            $attributes = '' if( ! $attributes );
+            my $parameters = '';
+            if( $attributes =~ s/([a-zA-Z0-9]+\=.*)$// ) {
+                $parameters = $1;
+            }
+            $parameters .= ' hidden="1"' if( $attributes =~ /H/ );
+            $parameters .= ' mandatory="1"' if( $attributes =~ /M/ );
+            require TWiki::Attrs;
+            $parameters = new TWiki::Attrs( $parameters );
+            $attributes = '';
+            $attributes .= 'H' if( $parameters->{hidden} );
+            $attributes .= 'M' if( $parameters->{mandatory} );
 
             my $definingTopic = "";
             if( $title =~ /\[\[(.+)\]\[(.+)\]\]/ )  {
@@ -305,6 +326,7 @@
                   value => $vals,
                   tooltip => $tooltip,
                   attributes => $attributes,
+                  parameters => $parameters,
                   definingTopic => $definingTopic,
                   web => $this->{web},
                   topic => $this->{topic}
@@ -612,8 +634,8 @@
     foreach my $fieldDef ( @{$this->{fields}} ) {
         my $fm = $meta->get( 'FIELD', $fieldDef->{name} );
         next unless $fm;
-        my $fa = $fm->{attributes} || '';
-        unless ( $fa =~ /H/ ) {
+        my $fp = $fm->{parameters};
+        unless ( $fp && $fp->{hidden} ) {
             $fieldFound = 1;
             my $row = $rowTemplate;
              # Legacy; was %A_TITLE% before it was $title

Plugin Info

  • Set SHORTDESCRIPTION = Autocomplete input field, for use in TWiki forms and TWiki applications

Author: TWiki:Main.PeterThoeny, TWiki.org
Copyright: © 2013-2014 Wave Systems Corp.
© 2013-2015 TWiki:Main.PeterThoeny
© 2013-2015 TWiki:TWiki.TWikiContributor
License: GPL (GNU General Public License)
Sponsor: Wave Systems Corp.
Version: 2015-05-29
2015-05-29: TWikibug:Item7604: Switch from GPL v2 to v3
2014-12-10: TWikibug:Item7556: Support additional input field attributes max, min and translate
2014-10-17: TWikibug:Item7556: Support additional input field attributes pattern and title; doc fixes
2014-10-13: TWikibug:Item7556: Support key="value" parameters in field attributes of TWiki form fields
2014-10-08: TWikibug:Item7556: Add selectstyle and containerstyle parameters
2014-10-06: TWikibug:Item7556: Support input field attributes: class, formname, id, maxlength, onblur, onfocus, onchange, onselect, onmouseover, onmouseout, placeholder, spellcheck, style, tabindex
2014-10-04: TWikibug:Item7556: Add autocomplete+restrict type
2014-10-04: TWikibug:Item7556: Fix format issue where autocomplete+values row did not show up in TWikiForms topic
2014-10-03: TWikibug:Item7556: Fix bug where multiple autocomplete on same topic would overwrite each other's options
2014-10-02: TWikibug:Item7556: Support for autocomplete options with value: title syntax
2014-10-01: TWikibug:Item7556: Initial version of AutocompletePlugin
TWiki Dependency: $TWiki::Plugins::VERSION 1.2
CPAN Dependencies: none
Other Dependencies: none
Perl Version: 5.005
Plugin Benchmark: GoodStyle nn%, FormattedSearch nn%, AutocompletePlugin nn%
Home: http://TWiki.org/cgi-bin/view/Plugins/AutocompletePlugin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/AutocompletePluginDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/AutocompletePluginAppraisal

Related Topics: VarAUTOCOMPLETE, TWikiPreferences, TWikiForms, TWikiPlugins

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 AutocompletePlugin.md5 r14 r13 r12 r11 r10 manage 0.2 K 2015-05-29 - 20:50 PeterThoeny  
Compressed Zip archivetgz AutocompletePlugin.tgz r14 r13 r12 r11 r10 manage 12.8 K 2015-05-29 - 20:50 PeterThoeny  
Compressed Zip archivezip AutocompletePlugin.zip r14 r13 r12 r11 r10 manage 16.5 K 2015-05-29 - 20:50 PeterThoeny  
Unknown file formatEXT AutocompletePlugin_installer r1 manage 3.7 K 2015-05-29 - 20:50 PeterThoeny  
Edit | Attach | Watch | Print version | History: r12 < r11 < r10 < r9 < r8 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r12 - 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-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.