SkillsTextBox

New Features:

  • Terms are matched everywhere(not only from the beginning)
  • Matched terms are highlighted
  • It's possible to enter more than one search term (separated by comma)
  • Presentation is changed when items are selected
  • Selection with mouse is working now (Tested with FireFox 2.0.0.11/MSIE 6/Opera 9.25)
  • pressing return key now feeds into the query list, you can remove an item clicking the x aside

Query Examples

You can type almost anything you want and should get some matches,
but here are a few example queries:
  • id, the
  • ty the
  • Thales, configuration
Go to the project's webpage here.


SkillsTextBox Editor 1

This editor is without debug and allows any node to be input.

edit

underlying storage (normally hidden):

SkillsTextBox Editor 2

This editor is with debug and allows only competencies to be fed in.

edit

underlying storage (normally hidden):

How to Integrate

Note: all links in these explanations are relative to this page. They are mostly generated by the GWT compiled for which an ant build file is used (thus far).

The generated javascript code is inserted by integrating in the header of your html code:

                <script language='javascript' src='net.i2geo.skillstextbox.SkillsTextBox.nocache.js'></script>
                <link rel="stylesheet" type="text/css"  href="SkillsTextBox.css" />

The zone where the skills-text-box will appear is a div for which you give an id:

                <div id="topicsOfThisConstruction"></div>

Next, each field that has to be "skills-text-box-edited" is to be made an input element, typically a hidden one such as follows. Some browsers prefer namme, some id, differentiate them with a trailing "_".

            <input name="topicsField_" id="topicsField" value="Construct_rectangle"/>

You probably want to have a button or link to activate skills-text-box-edition, this is a javascript code:

<a href="javascript:window.skbEdit('topicsOfThisConstruction','topicsField', 'competency','true');">edit</a>

Note that the second parameter is the id of the input while the third is the comma-separated list of types you want to allow and the fourth is an indicating to display a debug console as well (goes quickly big).

Finally, you probably want to have the display visible from the start, so add a please:

<script type="text/javascript">window.skbPleaseReplaceMe = window.skbPleaseReplaceMe + ",topicsOfThisConstruction/topicsField"</script>

This javascript variable is read and split by commas into pairs of instructions where to run skills-text-box rendering for when starting.



SkillsTextBox is based on the AutoCompleteTextBox-widget,
which is contained in the Rocket GWT library written by Miroslav Pokorny and on Apache Lucene written by a huge group of enthusastic retrieval experts.

SkillsTextBox is licensed under: Apache License 2.0