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 Description Default
containerClass css class of the widget container jqTextboxListContainer
listValueClass css class of values in the list jqTextboxListValue
closeClass css class of the close button of a list value jqTextboxListClose
enableClose boolean flag toggling the display of a close button on a list value true
doSort boolean flag enabling to sort list values when displaying them false
inputName name of the input element used for list values; equals to the name of the original input field if undefined undefined
resetControl jquery selector to specify a reset button; will revert changes to the initial list of values undefined
clearControl jquery selector to specify a clear button that will empty the textboxlist undefined
autocomplete defines the source for tag suggestions displayed using a %SYSTEMWEB.JQueryUIAutocomplete widget; e.g. this can be an array or an url undefined
onClear method called when the list is cleared undefined
onReset method called when the list is resetted undefined
onSelect method called when a value is selected undefined
onDeselect method called when a value is removed from the list 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"}%
Topic revision: r2 - 03 Jun 2017, LorenEvey
 
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Medical Histology? Send feedback