Scriptaculous SelectBox

기존의 스크립트를 prototype 1.6.3 의 Class 생성에 맞게 직접 패치했다.
스크립트

// Copyright (c) 2006 Gabriel Lanzani (http://www.glanzani.com.ar)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// SEE CHANGELOG FOR A COMPLETE CHANGES OVERVIEW
// VERSION 0.3.1

/* USAGE:

1 - include prototype.js


2 - include scriptaculous.js


3 - include select.js


4 - include autocomplete styles


5 - write a selec control with a valid id and name and its options

	option 1
	option 2
	option 3
	option 4


6 - just add this script in page

*/

Autocompleter.SelectBox = Class.create(Autocompleter.Base, {
  initialize: function(select, options) {
	this.element = ""
	$(select).insert({ before:this.element });
	var inputClasses = $(select).classNames();
	inputClasses.each(function(inputClass) {
		$($(select).id + "_combo").addClassName(inputClass);
	});

	this.update = "
"
	$(select).insert({ before:this.update });

    this.baseInitialize($(select).id + "_combo", $(select).id + "_options", options);
    this.select = select;
	this.selectOptions = [];

	$(this.element.id).addClassName(this.options.initClass);
	$(this.element.id).setAttribute('readonly','readonly');
	this.element.readOnly = true;
	if(this.options.debug) alert('input ' + this.element.id + ' and div '+ this.update.id + ' created, Autocompleter.Base() initialized');
	if(!this.options.debug) $(select).hide();

	var optionList = $(this.select).getElementsByTagName('option');
	var nodes = $A(optionList);

	for(i=0; i" + nodes[i].innerHTML + '');
		if (nodes[i].getAttribute("selected")) this.element.value = nodes[i].innerHTML;

		if(this.options.debug) alert('option ' + nodes[i].innerHTML + ' added to '+ this.update.id);
	}

	$(this.element).observe("click", this.activate.bindAsEventListener(this));

	if ($(select).selectedIndex >= 0) this.element.value = $(select).options[$(select).selectedIndex].innerHTML;

	var self = this;
	this.options.afterUpdateElement = function(text, li) {
		var optionList = $(select).getElementsByTagName('option');
		var nodes = $A(optionList);

		var opt = nodes.find( function(node) {
			return (node.value == li.id);
		});
		$(select).selectedIndex = opt.index;
		if(self.options.redirect) document.location.href = opt.value;
		if(self.options.autoSubmit) $(self.options.autoSubmit).submit;
	}
  },

  getUpdatedChoices: function() {
  		this.updateChoices(this.setValues());
  },

  setValues : function() {
		return ("
" + this.selectOptions.join('') + "
");
  },

  setOptions: function(options) {
    this.options = Object.extend({
		//MORE OPTIONS TO EXTEND THIS CLASS
		redirect	: false,  // redirects to option value
		debug		: false,  // show alerts with information
		autoSubmit	: '',     // form Id to submit after change
		initClass   : 'combo' // set css class
	}, options || {});
  }
});

스타일쉬트

div.autocomplete {
  position:absolute;
  width:200px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  padding:0px;
  font-size: 9pt;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.autocomplete ul li.selected {
  background-color: #EAF2FB;
}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}
input.combo	/* look&fell of scriptaculous select box */
{
	background: url('/images/bg_select.jpg') right;
	width: 10em; height: 20px;
	cursor: pointer;
	border: 1px solid #ccc;
	text-align:left;
	font: normal 9pt sans-serif;
}