Script.aculo.us Select Box

Overview

This javascript class allows you to replace (X)HTML select control with a nice styled select boxes in your site.

This class is based on Prototype and Scriptaculous with all latest version (prototype 1.6.0.1 and scriptaculous 1.8.1)

It has been tested on Firefox 2 and 3, Safari, IE6, IE7.

Current Version 0.4 (26/08/2008), see changelog for more detail

Features

Replace old and ugly select controls
Visual effects
Skinnable
Extensible
Generates XHTML valid code

How to Use

It's easy, like scriptaculous just need to include 2 files and this extension, and the styles associated with scriptaculous autocomplete.

					
<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/scriptaculos.js"> </script>

<!-- link to scriptaculous select scripts  -->
<script type="text/javascript" src="/javascripts/select.js"> </script>

<!-- link to autocomplete style sheet -->
<link href="/styles/autocomplete.css" rel="stylesheet" type="text/css"></link>

We only need a select input with unique ID and class for autocomplete (see autocomplete docs)

					 
<select id="id_of_select_control" class="autocomplete_class">
	<option value="1">Option 1</option>
	<option value="2" selected="selected">Option 2</option>
	...
	..
	.
</select>

And in our page just make a call like this one to have a nice, style select box :D

					
new Autocompleter.SelectBox('id_of_select_control');

As this class inherits from Autocomplete.Base, you can use all options of this, except for afterUpdateElement, aditionally, you have optional parameters (see documentation):

Download

All files used in this project:

License

This extension is licensed under a MIT-style license, so you can use it for anything you like, as long as you include the copyright notice.

Overview

Features

How to Use

Download

License

Tanks To all people who sent me new ideas for this script