http://1vu.fr

Advanced Suggest and Select Box Project

Version 2.1.0 (still in svn repo only)

Advanced Suggest and Select Box :

The DefaultIconedSuggestBox is built to support these features:
  • Icons in your suggest box and select box
  • Use any GWT widgets to display your values inside the suggest box: an html table mode is also available for multiple columns display mode
  • Value validation (here for the example purpose we check the value length is more than 3 chars)
  • The Strict mode allows you to use the suggest box instead of the combo (select) boxes also
  • Have your own filtering algorithm that is activated as the user types (for an example we added the two filtering algos: case sensitive and starts with)
  • Many styles are added on events like mouse over, element selection, matching characters, validation error etc... just write your css file and you're done)'
In addition, there are some "invisible" features like:
  • Type safe values
  • Decorate your Suggest Box or Select Box with complementary information (other that an icon) by extending DefaultSuggestBox (the parent class of DefaultIconedSuggestBox) and adding your logic directly inside the component
  • Alternate representations of the choice list (You're not obliged to have a popup)
  • Extended styling in a consistent way on all browsers (in opposition to the Select box that is a native component which display depends on the browser)
  • The architecture is a very clean approach with more than 10 years of experience in Java technologies, you can get into the source code and find what you need very easily

Test the Suggest box here and play with the options on the right:

Options:
I chose some of my preferred Google chrome extentions to fill the values of this list. Here are the values that you chose

Test the Multivalued Suggest box here

Options:
The same options as the advanced suggest box are available.
You can define your own styles, layout and position (left, right, top, bottom, or outside the box) to represent the selected values

Selection Panel :
Alternative to radio boxes, combo boxes and TabBar in both vertical and horizontal modes
  • You can reuse icons and other components between the suggest box and this library
  • maxSelected (=2 in this demo) property (default=1) limits the simultaneous selected items count in a fifo manner (for unlimited set it to -1)
  • selected and hover status handled separately with additional styles

The Max selected number is the count of maximum allowed choices. It behaves like a multichoice select box limited to 'maxSelected' values

The select once 'mode' decides if a value is clicked twice, if it has to be present twice in the list of selected values. The number of selected items cannot be greater that 'maxSelected', increase that number at least to 2 to see the mode in action

The Toggle 'mode' makes the widget behave as a checkbox: it is selected or unselected on each click (as long as the maxSelected is not exceeded)

Selection Panel in a different style:


here it can be used as a replacement for radio and check boxes

Selection Panel as a range selection widget:

State Panel :
Panel with multiple states. By default, the state toggles between two possible states as a button, but the component handles
  • multiple states with a manager interface to switch between states
  • enabled and disabled status handled separately with additional styles

Advanced Text Box :
this component is the basic widget of the suggest box, it handles:
  • Default text with a different style
  • Double click events


This demo is for the Advanced suggest select box project licensed under the Apache2 license
Thanks to Thomas Lebrun for his contribution in the graphical design proposition.