https://www.dmu.ac.uk/SiteElements/Scripts/Selectbox-Plugin/jquery-selectbox.js?version=21877&build=172184

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.5
13 * 
14 * Changelog :
15 *  Version 0.5 
16 *  - separate css style for current selected element and hover element which solve the highlight issue 
17 *  Version 0.4
18 *  - Fix width when the select is in a hidden div   @Pawel Maziarz
19 *  - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz
20 */
21jQuery.fn.extend({
22	selectbox: function(options) {
23		return this.each(function() {
24			new jQuery.SelectBox(this, options);
25		});
26	}
27});
28
29
30/* pawel maziarz: work around for ie logging */
31if (!window.console) {
32	var console = {
33		log: function(msg) { 
34	 }
35	}
36}
37/* */
38
39jQuery.SelectBox = function(selectobj, options) {
40	
41	var opt = options || {};
42	opt.inputClass = opt.inputClass || "selectbox";
43	opt.containerClass = opt.containerClass || "selectbox-wrapper";
44	opt.hoverClass = opt.hoverClass || "current";
45	opt.currentClass = opt.selectedClass || "selected"
46	opt.debug = opt.debug || false;
47	
48	var elm_id = selectobj.id;
49	var active = -1;
50	var inFocus = false;
51	https://mycms.dmu.ac.uk/CMSEngine/Dialogue/Dialogue.aspx?DialogueType=79&DialogueDisplayMode=3&DialogueKey_ProjectId=1&DialogueKey_ContentID=2265&DialogueKey_WorkflowType=0&DialogueKey_ContentTypeID=12&DialogueKey_IsSiteMigrationMode=false&DialogueKey_ReadOnly=false#contextmenu_submitauthorise_linkvar 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   		
67			$container.toggle();
68		
69		
70		
71	})
72	
73	.keydown(function(event) {	   
74		switch(event.keyCode) {
75			case 38: // up
76				event.preventDefault();
77				moveSelect(-1);
78				break;
79			case 40: // down
80				event.preventDefault();
81				moveSelect(1);
82				break;
83			//case 9:  // tab 
84			case 13: // return
85				event.preventDefault(); // seems not working in mac !
86				$('li.'+opt.hoverClass).trigger('click');
87				break;
88			case 27: //escape
89			  hideMe();
90			  break;
91		}
92	})
93	.blur(function() {
94		if ($container.is(':visible') && hasfocus > 0 ) {
95			if(opt.debug) console.log('container visible and has focus')
96		} else {
97			hideMe();	
98		}
99	});
100
101
102	function hideMe() { 
103		hasfocus = 0;
104		$container.hide(); 
105	}
106	
107	function init() {
108		$container.append(getSelectOptions($input.attr('id'))).hide();
109		var width = $input.css('width');
110		$container.width(width);
111    }
112	
113	function setupContainer(options) {
114		var container = document.createElement("div");
115		$container = $(container);
116		$container.attr('id', elm_id+'_container');
117		$container.addClass(options.containerClass);
118		
119		return $container;
120	}
121	
122	function setupInput(options) {
123		var input = document.createElement("input");
124		var $input = $(input);
125		$input.attr("id", elm_id+"_input");
126		$input.attr("type", "text");
127		$input.addClass(options.inputClass);
128		$input.attr("autocomplete", "off");
129		$input.attr("readonly", "readonly");
130		$input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie
131		
132		return $input;	
133	}
134	
135	function moveSelect(step) {
136		var lis = $("li", $container);
137		if (!lis) return;
138
139		active += step;
140
141		if (active < 0) {
142			active = 0;
143		} else if (active >= lis.size()) {
144			active = lis.size() - 1;
145		}
146
147		lis.removeClass(opt.hoverClass);
148
149		$(lis[active]).addClass(opt.hoverClass);
150	}
151	
152	function setCurrent() {	
153		var li = $("li."+opt.currentClass, $container).get(0);
154		var ar = (''+li.id).split('_');
155		var el = ar[ar.length-1];
156		$select.val(el);
157		$input.val($(li).html());
158		return true;
159	}
160	
161	// select value
162	function getCurrentSelected() {
163		return $select.val();
164	}
165	
166	// input value
167	function getCurrentValue() {
168		return $input.val();
169	}
170	
171	function getSelectOptions(parentid) {
172		var select_options = new Array();
173		var ul = document.createElement('ul');
174		$select.children('option').each(function() {
175			var li = document.createElement('li');
176			li.setAttribute('id', parentid + '_' + $(this).val());
177			li.innerHTML = $(this).html();
178			if ($(this).is(':selected')) {
179				$input.val($(this).html());
180				$(li).addClass(opt.currentClass);
181			}
182			ul.appendChild(li);
183			$(li)
184			.mouseover(function(event) {
185				hasfocus = 1;

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