JQueryTextboxList

Homepage: http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 2.30

Description

Turns a text input into a list widget with autocompletion. This plugin adds a new formfield type textboxlist to DataForms.

Usage

An html input field can be turned into a textboxlist widget either using javascript or using the jqTextboxList css class.

Using javascript:

<input type="text" name="tags" />

<script>
jQuery(function($) {
  $("input[name='tags']").textboxlist(options);
});
</script>

Using css and HTML5 data:

<input type="text" name="tags" class="jqTextboxList" data-container-class="..." data-sorting="..." ... />

Options

Events

Instead of specifying callbacks using the onSelect or onDeselect options, custom events are emitted by the textboxlist widget that your own code can be bound to.

Example:

<input type="text" class="jqTextboxList" id="mylist" />
<script>
jQuery(function($) {
  $("#mylist").bind("SelectValue", function(value) {
    ...
  });
});
</script>

Examples

Tagging

Tagging with autocomplete suggestions

Note, that you will need FilterPlugin to run the example successfully.

Backend Implementation

%STARTSECTION{"data"}%%FORMATLIST{
  "admin,
   backup,
   bash,
   emulation,
   games,
   irc,
   linux,
   mercurial,
   patches,
   perl,
   php,
   python,
   site,
   surfing,
   tag,
   test,
   foswiki,
   web,
   wiki,
   windows,
   windsurfing,
   wine
  "
  split="\s*,\s*"
  header="["
  format="{\"value\":\"$1\"} "
  footer="]"
  separator=",$n"
  include="\s*%URLPARAM{"term"}%.*"
}%%ENDSECTION{"data"}%