CyloCombo V_0.1 Pure DHTML JavaScript Combo boxes. Completely configurable, mimicking real Combo box behaviour. To use CyloCombo, get the required scripts in your page using js/CyloCombo.js Also get the CSS file from css/cylo.css

Conciderable care has been taken to capture the behaviour of a real combo box, although in some cases, exact behaviour has been difficult to reproduce.

Four different breeds of combo box have been identified. These breeds not only show visible differences in their appearance but also in their behaviour.

Here are the four differnt breeds of combo boxes.

The left hand side combo's are real, the ones on the right are made purely from JavaScript and a little CSS.

REAL	FAKE
Type (1) Attributes Multiple=Multiple Size=6
Option 1 Option 2 Option 3 Option 4
Type (2) Attributes Multiple=Multiple
Option 1 Option 2 Option 3 Option 4
Type (3) Attributes Size=6
Option 1 Option 2 Option 3 Option 4
Type (4) Attributes None
Option 1 Option 2 Option 3 Option 4

HTML Events

HTML elements allow events to be attached to them. According to W3Schools ,the select box has 3 possible event triggers.

	onfocus
	onblur
	onchange

The Cylo combo box supports these as well as the following events for your convenience

	onclick
	ondblclick

Here is a Real combo box with all 5 event trigger events implemented.

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7

Here is a CyloCombo box with all the event trigger events implemented.
Here is a 'closed' Real Combo box with all the event trigger events implemented.

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7

Here is a 'closed' CyloCombo box with all the event trigger events implemented.

Common scenarios

Scenario 1

Here is the common scenario of moving selected items from one combo to another.

>  >> <<  <

Notice by pressing '>' it moves across all selected items in the left hand combo to the right hand combo while pre-selecting the next one in the left combo, as well as highlighting all items in the right combo. This is not built in behaviour, but just shows you can do useful things with CyloCombo as you can with real combo's, with little effort. View source and search for moveright() to see how it's done.

Scenario 2

Here is the common scenario of populating combo boxes depending on the value of the previous combo box.

Scenario 3

A third common scenario is a combo option list populating with suggested words for an input box like this one here.

Enter a town name beginning with A, B or C.

Scenario 4

Sometimes disabling a combo box is required. Here are two implementations of disabled combo boxes.

EnableDisable Get

EnableDisable Get

So, what is the point of reinventing the wheel?

You can put any HTML inside an option which is not possible with a real combo box
You can easily assign classes and backgrounds to the options
You can place images inside the options
You can put links which go to other pages
You can add tooltips directly to each option

How does it work?

Each combo is created with a hidden 'real' combo box. When you select the options in the Cylo combo box, the hidden one also gets selected. This then enables you to use Cylo combo box's in forms for actual form submission.

CyloCombo Real

FEATURES!

1. These combo boxes are able to take HTML as values.

2. Can have individual tooltips on each option.

To do!

1. Add auto size to longest text.

2. Scroll events to handle proper jerking

3. Tab from control to the next.

4. Dotted on selected option

5. Rewrite the code so people take me seriously? ... na

THINGS TO BE AWARE OF!

1. The first option in a 'closed' combo box that is added to the combo will force it to resize it's height. Images in the options will take time to download and the option will have sized itself without the image. If this is causing you trouble, you may want to preload the images before you instantiate the combo options.

2. Real Combo box's automatically resize to the length of it's contents if you do not specify a width. CyloCombo's do not currently support this facility but will do in the near future.

3. You need to think about when you want to load each combo. They will jerks the page around because of their widths and heights. You could opt to load each combo as the page loads, but you must be sure all of the CyloCombo JavaScript class has been loaded.