University of Natural Resources and Life Sciences (BOKU)
Institute of Computational Biology

JQueryTextboxList

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

Description

Turns a text input into a Facebook like 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:

<input type="text" name="tags" class="jqTextboxList {options}" />

In both cases options is a json object to customized the textboxlist to your needs.

Options

Name DescriptionSorted ascending Default
doSort boolean flag enabling to sort list values when displaying them false
enableClose boolean flag toggling the display of a close button on a list value true
closeClass css class of the close button of a list value jqTextboxListClose
containerClass css class of the widget container jqTextboxListContainer
listValueClass css class of values in the list jqTextboxListValue
autocomplete defines the source for tag suggestions displayed using a %SYSTEMWEB.JQueryUIAutocomplete widget; e.g. this can be an array or an url undefined
clearControl jquery selector to specify a clear button that will empty the textboxlist undefined
resetControl jquery selector to specify a reset button; will revert changes to the initial list of values undefined
onDeselect method called when a value is removed from the list undefined
onSelect method called when a value is selected undefined
onClear method called when the list is cleared undefined
onReset method called when the list is resetted undefined
inputName name of the input element used for list values; equals to the name of the original input field if undefined undefined

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>

Event Parameters Description
SelectValue value triggered when a value is selected
DeleteValue value triggered when a value is deselected

Examples

Tagging

Tags:

Type in some keywords

Tagging with autocomplete suggestions

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

Tags:

Tags are suggested as you type.

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"}%
28 Mar 2024 - 19:27 Foswiki v2.0.2