https://www.schiffsreisen.de/js/select.js

1/*
2 * jQuery selectbox plugin
3 *
4 * Copyright (c) 2007 Sadri Sahraoui (brainfault.com)
5 * Licensed under the GPL license and MIT:
6 *   http://www.opensource.org/licenses/GPL-license.php
7 *   http://www.opensource.org/licenses/mit-license.php
8 *
9 * The code is inspired from Autocomplete plugin (http://www.dyve.net/jquery/?autocomplete)
10 *
11 * Revision: $Id$
12 * Version: 0.4
13 * 
14 * Changelog :
15 *  - Fix width when the select is in a hidden div   @Pawel Maziarz
16 *  - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz
17 */
18jQuery.fn.extend({
19	selectbox: function(options) {
20		return this.each(function() {
21			new jQuery.SelectBox(this, options);
22		});
23	}
24});
25
26
27/* pawel maziarz: work around for ie logging */
28if (!window.console) {
29	var console = {
30		log: function(msg) { 
31	 }
32	}
33}
34/* */
35
36jQuery.SelectBox = function(selectobj, options) {
37	
38		return false;
39	if(jQuery.browser.msie==true && jQuery.browser.version == '6.0')
40	{
41	}
42	var opt = options || {};
43	opt.inputClass = opt.inputClass || "selectbox";
44	opt.containerClass = opt.containerClass || "selectbox-wrapper";
45	opt.hoverClass = opt.hoverClass || "selected";
46	opt.debug = opt.debug || false;
47	
48	var elm_id = selectobj.id;
49	var active = -1;
50	var inFocus = false;
51	var hasfocus = 0;
52	//jquery object for select element
53	var $select = $(selectobj);
54	// jquery container object
55	var $container = setupContainer(opt);
56	//jquery input object 
57	var $input = setupInput(opt);
58	// hide select and append newly created elements
59	$select.hide().before($input).before($container);
60	
61	
62	init();
63	
64	$input
65	.click(function(){
66        if (!inFocus) {
67		  $container.toggle();
68		}
69	})
70	.focus(function(){
71	   if ($container.not(':visible')) {
72	       inFocus = true;
73	       $container.show();
74	   }
75	})
76	.keydown(function(event) {	   
77		switch(event.keyCode) {
78			case 38: // up
79				event.preventDefault();
80				moveSelect(-1);
81				break;
82			case 40: // down
83				event.preventDefault();
84				moveSelect(1);
85				break;
86			//case 9:  // tab 
87			case 13: // return
88				event.preventDefault(); // seems not working in mac !
89				setCurrent();
90				hideMe();
91				break;
92		}
93	})
94	.blur(function() {
95		if ($container.is(':visible') && hasfocus > 0 ) {
96			if(opt.debug) console.log('container visible and has focus')
97		} else {
98			hideMe();	
99		}
100	});
101
102
103	function hideMe() { 
104		hasfocus = 0;
105		$container.hide(); 
106	}
107	
108	function init() {
109		$container.hide().append(getSelectOptions($input.attr('id')));
110		var width = $input.css('width');
111		$container.width(width);
112    }
113	
114	function setupContainer(options) {
115		var container = document.createElement("div");
116		$container = $(container);
117		$container.attr('id', elm_id+'_container');
118		$container.addClass(options.containerClass);
119		
120		return $container;
121	}
122	
123	function setupInput(options) {
124		var input = document.createElement("input");
125		var $input = $(input);
126		$input.attr("id", elm_id+"_input");
127		$input.attr("type", "text");
128		$input.addClass(options.inputClass);
129		$input.attr("autocomplete", "off");
130		$input.attr("readonly", "readonly");
131		$input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie
132		
133		return $input;	
134	}
135	
136	function moveSelect(step) {
137		var lis = $("li", $container);
138		if (!lis) return;
139
140		active += step;
141
142		if (active < 0) {
143			active = 0;
144		} else if (active >= lis.size()) {
145			active = lis.size() - 1;
146		}
147
148		lis.removeClass(opt.hoverClass);
149
150		$(lis[active]).addClass(opt.hoverClass);
151	}
152	
153	function setCurrent() {	
154		var li = $("li."+opt.hoverClass, $container).get(0);
155		var ar = (''+li.id).split('_');
156		var el = ar[ar.length-1];
157		$select.val(el);
158		$input.val($(li).html());
159		return true;
160	}
161	
162	// select value
163	function getCurrentSelected() {
164		return $select.val();
165	}
166	
167	// input value
168	function getCurrentValue() {
169		return $input.val();
170	}
171	
172	function getSelectOptions(parentid) {
173		var select_options = new Array();
174		var ul = document.createElement('ul');
175		$select.children('option').each(function() {
176			var li = document.createElement('li');
177			li.setAttribute('id', parentid + '_' + $(this).val());
178			li.innerHTML = $(this).html();
179			if ($(this).is(':selected')) {
180				$input.val($(this).html());
181				$(li).addClass(opt.hoverClass);
182			}
183			ul.appendChild(li);
184			$(li)
185			.mouseover(function(event) {
186				hasfocus = 1;

187				if (opt.debug) console.log('out on : '+this.id);
188				jQuery(event.target, $container).addClass(opt.hoverClass);
189			})
190			.mouseout(function(event) {
191				hasfocus = -1;
192				if (opt.debug) console.log('out on : '+this.id);
193				jQuery(event.target, $container).removeClass(opt.hoverClass);
194			})
195			.click(function(event) {
196				if (opt.debug) console.log('click on :'+this.id);
197				$(this).addClass(opt.hoverClass);
198				setCurrent();
199				hideMe();
200			});
201		});
202		return ul;
203	}
204	
205};