JQueryTextboxList < System

Downloads

release

dev builds

extras

themes

Documentation

manual

wiki

device status

Support

forums

mailing lists

IRC

Development

bugs

patches

dev guide

Donate

Wiki > System > JQueryPlugin > JQueryTextboxList

---+ %TOPIC%
%JQPLUGINS{"textboxlist"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
Turns a text input into a Facebook like list widget with autocompletion.
This plugin adds a new formfield type =textboxlist= to DataForms.
%ENDSECTION{"summary"}%

---++ Examples
%JQREQUIRE{"textboxlist"}%

---+++ Tagging
<form>
<div class="foswikiFormSteps">
  <div class="foswikiFormStep">
    <h3>Tags:</h3>
    <input type="text" class="foswikiInputField jqTextboxList" size="20" name="tags" value="%URLPARAM{"tags" multiple="on" separator=", " default="foo, bar, baz"}%" />
    <div class="foswikiGrayText">
       Type in some keywords
    </div>
  </div>
  <div class="foswikiFormStep">
    %BUTTON{"%MAKETEXT{"Submit"}%" icon="tick" type="submit"}%
    %CLEAR%
  </div>
</div>
</form>

---+++ Tagging with autocomplete suggestions

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

<form>
<div class="foswikiFormSteps">
  <div class="foswikiFormStep">
    <h3>Tags:</h3>
    <input class="foswikiInputField jqTextboxList {autocomplete:'%SCRIPTURL{"view"}%/%WEB%/%TOPIC%?section=data;skin=text'}" id="example" size='42'  />
    <div class="foswikiFormDescription">
      Tags are suggested as you type.
    </div>
  </div>
</div>
</form>

---++ Backend Implementation
<verbatim class="tml">
%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"}%
</verbatim>

r1 - 26 Oct 2011 - 11:40:37 - ProjectContributor

Parents: JQueryPlugin

Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Wiki? Send feedback