This led me to the jQuery UI combox which uses the jQuery UI autocomplete control. This worked very nicely except that it is not a dropdown list that users are most used to seeing. As soon as the new form entered QA, I was pinged with a message saying that it was a bit awkward to use and would probably be difficult for users. I couldn’t disagree with that and this motivated me to try and see if I could make it more like a dropdown list.

After a few hours of head scratching, I am ready to present the first version of my control, which I would say is about 90% faithful to the feel of native control. There are a few things it does not do but I feel I am close enough to release it to the world for criticism.

Try the demo

Here is the code:

(function ($) {
    $.widget("ui.combobox", {
        _create: function () {
            var self = this,
				select = this.element.hide(),
				selected = select.children(":selected"),
				value = selected.val() ? selected.text() : "",
				regSearch = /^[^a-zA-Z0-9]*([a-zA-Z0-9])/i,
				comboData = select.children("option").map(function () {
					if (this.value ) {
						var text = $(this).text(), 
							labelHtml = self.options.label ? self.options.label(this) : text; //allows list customization
 
						return {
							label: labelHtml,
							value: text,
							option: this
						};
					}
				});
 
            var input = this.input = $("<input type='text' />")
					.insertAfter(select)
					.val(value)
					.keydown( function( event ) {
							var keyCode = $.ui.keyCode;
							switch( event.keyCode ) {
								case keyCode.PAGE_UP:
								case keyCode.PAGE_DOWN:
								case keyCode.UP:
								case keyCode.DOWN:
								case keyCode.ENTER:
								case keyCode.NUMPAD_ENTER:
								case keyCode.TAB:
								case keyCode.ESCAPE:
									//let autocomplete handle these
									break;
								default:
									//prevent autocomplete doing anything
									event.stopImmediatePropagation();
									//only react to [a-zA-Z0-9]
									if ((event.keyCode < 91 && event.keyCode > 59)
										|| (event.keyCode < 58 && event.keyCode > 47)) {
 
										var str = String.fromCharCode(event.keyCode).toLowerCase(), currVal = input.val(), opt;
 
										//find all options whose first alpha character matches that pressed
										var matchOpt = select.children().filter(function() {
											var test = regSearch.exec(this.text);
											return (test && test.length == 2 && test[1].toLowerCase() == str);
										});
 
										if (!matchOpt.length ) return false;
 
										//if there is something selected we need to find the next in the list
										if (currVal.length) {
											var test = regSearch.exec(currVal);
											if (test && test.length == 2 && test[1].toLowerCase() == str) {
												//the next one that begins with that letter
												matchOpt.each(function(ix, el) {
													if (el.selected) {
														if ((ix + 1) <= matchOpt.length-1) {
															opt = matchOpt[ix + 1];
														}
														return false;
													}
												});
											}
										} 
 
										//fallback to the first one that begins with that character
										if (!opt)
											opt = matchOpt[0];
 
										//select that item
										opt.selected = true;
										input.val(opt.text);
 
										//if the dropdown is open, find it in the list
										if (input.autocomplete("widget").is(":visible")) {
											input.data("autocomplete").widget().children('li').each(function() {		
												var $li = $(this);
												if ($li.data("item.autocomplete").option == opt) {
													input.data("autocomplete").menu.activate(event,$li);
													return false;
												}
											});
										}
									}
									//ignore all other keystrokes
									return false;
									break;
								}
					  })
					.autocomplete({
					    delay: 0,
					    minLength: 0,
					    source: function (request, response) { response(comboData); },
					    select: function (event, ui) {
					        ui.item.option.selected = true;
					        self._trigger("selected", event, {
					            item: ui.item.option
					        });
					    },
					    change: function (event, ui) {
							if (!ui.item) {					
								var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
									valid = false;
								select.children("option").each(function () {
									if ($(this).text().match(matcher)) {
										this.selected = valid = true;
										return false;
									}
								});
								if (!valid) {
									// remove invalid value, as it didn't match anything
									$(this).val("");
									select.val("");
									input.data("autocomplete").term = "";
									return false;
								}
							}
					    }
					})
					.addClass("ui-widget ui-widget-content ui-corner-left")
					.click(function() { self.button.click(); })
					.bind("autocompleteopen", function(event, ui){
						//find the currently selected item and highlight it in the list
						var opt = select.children(":selected")[0];
						input.data("autocomplete").widget().children('li').each(function() {		
							var $li = $(this);
							if ($li.data("item.autocomplete").option == opt) {
								input.data("autocomplete").menu.activate(event,$li);
								return false;
							}
						});
					});
 
            input.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
					.data("item.autocomplete", item)
					.append("<a href='#'>" + item.label + "</a>")
					.appendTo(ul);
            };
 
            this.button = $("<button type='button'>&nbsp;</button>")
					.attr("tabIndex", -1)
					.attr("title", "Show All Items")
					.insertAfter(input)
					.button({
					    icons: {
					        primary: "ui-icon-triangle-1-s"
					    },
					    text: false
					})
					.removeClass("ui-corner-all")
					.addClass("ui-corner-right ui-button-icon")
					.click(function () {
					    // close if already visible
					    if (input.autocomplete("widget").is(":visible")) {
					        input.autocomplete("close");
					        return;
					    }
 
					    // pass empty string as value to search for, displaying all results
					    input.autocomplete("search", "");
					    input.focus();
					});
        },
 
		//allows programmatic selection of combo using the option value
        setValue: function (value) {
            var $input = this.input;
            $("option", this.element).each(function () {
                if ($(this).val() == value) {
                    this.selected = true;
                    $input.val(this.text);
					return false;
                }
            });
        },
 
        destroy: function () {
            this.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

The particular functions I tried to add are:

• Removal of any standard textbox typing characteristics
• Typing in the textbox jumps to the item begining with that letter
• Hitting the same letter continuously cycles through the items beginning with that letter
• Programatically select an item using the value
• Retain navigation through list via arrow keys/paging
• Opening the list jumps to the selected item

Feel free to take it and use it but I am very keen on any improvements that can be made, so please let me know what you think.

I know that performance is a bit of a problem with large lists but stopping autocomplete from rebuilding the list each time it is displayed is a little tricky and would mean changing more of it’s private functions – something I was hoping to avoid. Suggestions welcome.

*Edit: I totally had my terminology messed up. I was calling my control a combobox which it absolutely isnt. It is a dropdown list, so I have updated the post to reflect that. *places dunce hat on*

On the most part, the upgrade was fairly painless. Most things worked without change but one particular plug-in did not – AjaxQueue. This is a great little control that acts as an add-on to the ajax method of jQuery, allowing a little more control over how concurrent calls are processed. It gives three modes of operation but for us, the most useful of these are abort and queue and from the names it is fairly obvious what they do.

After I upgraded to jQuery 1.3, it did not take me long to realise that the queue mode was broken. I briefly looked around for an alternative plug-in but found that all of them would require too much change to our existing controls. There was no alternative, I had to open up the hood of AjaxQueue and see what had gone wrong.

What I found was that there must of been a change to a method that the plug-in relied on – a method that it seemed, only became publicly available in version 1.3 – queue. Although the function was similar, the conclusion that I came to was that prior to version 1.3, the queue function automatically de-queued any function added and processed it. When using the latest jQuery, the ajax calls were queued but there was no code to start the processing of the queue.

It was slightly more complex I thought it would be to get it going – I had to ensure the queue was only started once. I finally came up with a solution and a newly revived plug-in, the code of which is below. As the original plugin has not been touched for quite some time (2007), I thought it ok to post my modified version here.

(function($) {
 
    var ajax = $.ajax,
        pendingRequests = {},
        synced = [],
        syncedData = [],
        ajaxRunning = [];
 
 
    $.ajax = function(settings) {
        // create settings for compatibility with ajaxSetup
        settings = jQuery.extend(settings, jQuery.extend({}, jQuery.ajaxSettings, settings));
 
        var port = settings.port;
 
        switch (settings.mode) {
            case "abort":
                if (pendingRequests[port]) {
                    pendingRequests[port].abort();
                }
                return pendingRequests[port] = ajax.apply(this, arguments);
            case "queue":
                var _old = settings.complete;
                settings.complete = function() {
                    if (_old) {
                        _old.apply(this, arguments);
                    }
                    if (jQuery([ajax]).queue("ajax" + port).length > 0) {
                        jQuery([ajax]).dequeue("ajax" + port);
                    } else {
                        ajaxRunning[port] = false;
                    }
                };
 
                jQuery([ajax]).queue("ajax" + port, function() {
                    ajax(settings);
                });
 
                if (jQuery([ajax]).queue("ajax" + port).length == 1 && !ajaxRunning[port]) {
                    ajaxRunning[port] = true;
                    jQuery([ajax]).dequeue("ajax" + port);
                }
 
                return;
            case "sync":
                var pos = synced.length;
 
                synced[pos] = {
                    error: settings.error,
                    success: settings.success,
                    complete: settings.complete,
                    done: false
                };
 
                syncedData[pos] = {
                    error: [],
                    success: [],
                    complete: []
                };
 
                settings.error = function() { syncedData[pos].error = arguments; };
                settings.success = function() { syncedData[pos].success = arguments; };
                settings.complete = function() {
                    syncedData[pos].complete = arguments;
                    synced[pos].done = true;
 
                    if (pos == 0 || !synced[pos - 1])
                        for (var i = pos; i < synced.length && synced[i].done; i++) {
                        if (synced[i].error) synced[i].error.apply(jQuery, syncedData[i].error);
                        if (synced[i].success) synced[i].success.apply(jQuery, syncedData[i].success);
                        if (synced[i].complete) synced[i].complete.apply(jQuery, syncedData[i].complete);
 
                        synced[i] = null;
                        syncedData[i] = null;
                    }
                };
        }
        return ajax.apply(this, arguments);
    };
 
})(jQuery);

This got me thinking that it would be awesome to be able to create cue files from discogs.com. So I created the following – a bookmarklet to do just that.

Disclaimer: it is pretty rough and I cannot guarantee that it will work with all discogs.com entries and there is hardly any error checking. I have only used this in Firefox so I cannot guarantee it will work in any other browser. It only pops up a dialogue with the cuesheet contents on it but that was adequate for me to copy and paste it into a text file and tweak it so that it was a valid cuesheet.

The important thing is that it gathers the track names and artists and works out the index times. It also attempts to cope with double cds and also single tracks that are two different records playing at once (common with DJ mixes). Here is the bookmarklet (drag it into your bookmarks tookbar), followed by the code itself:

Drag this to your bookmark toolbar: Create Cue

The code itself:

javascript:(function(){var s=document.createElement('SCRIPT');
s.type='text/javascript';
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js';
s.onload=function() {
	var title = jQuery.trim(jQuery('div.profile h1').text()),
		performer = jQuery.trim(title.substring(0,title.indexOf('-'))),
		file = title + '.mp3', secCount = 0, trkCount = 0, cues = [], cdNo = 1;
	title = jQuery.trim(title.substring(title.indexOf('-')+1));
	tracks = [];
	jQuery('div.tracklist .section_content > table tr').each(function(ix, el) {
		var trackCd = jQuery.trim(jQuery('td.track_pos',this).text());
		if (trackCd && trackCd != '') {
			var track = {}, tracktime = [], isDouble = false;
			trackCd = trackCd.split('-');
			if (trackCd.length > 1) {
				if (jQuery.trim(trackCd[0]) != cdNo) {
					createCue();
					cdNo = trackCd[0];
				} else {
					if (parseInt(trackCd[1]) == trkCount) {
						isDouble = true;
					}
				}
			}
			if (!isDouble) {
				trkCount+=1;
				track['trackno'] = trkCount;
				track['artist']= jQuery.trim(jQuery('td.track_artists',this).text()).replace(/\s-$/g, '').replace(/\n/g, '').replace(/\s+/g,' ');
				track['artist'] = jQuery.trim(track['artist']);
				track['artist'] = (track['artist'] == '') ? performer : track['artist'];
				track['title'] = jQuery.trim(jQuery('td.track',this).text()); 
				tracktime =jQuery.trim(jQuery('td.track_duration',this).text()).split(':'); 
				track['index'] = secondsToMinSec(secCount);
				secCount += (tracktime[0] * 60) + (tracktime[1] * 1);
				tracks[tracks.length] = track;	
			}
		}
 
	});
 
	createCue();
 
	//print it out
	var output = '';
	jQuery.each(cues,function(ix, cue) {
		output += cue + '\n\n\n';
	});
 
	alert(output);
 
	function createCue() {
		var quo = unescape('%22'),
			cue = 'TITLE '+quo+title+quo+'\n';
		cue += 'PERFORMER '+quo+performer+quo+'\n';
		cue += 'FILE '+quo+file+quo+' MP3\n';
		jQuery.each(tracks,function(ix, track) {
			cue += '  TRACK '+track.trackno+' AUDIO\n';
			cue += '    TITLE '+quo+track.title+quo+'\n';
			cue += '    PERFORMER '+quo+track.artist+quo+'\n';
			cue += '    INDEX 01 '+quo+track.index+quo+'\n';
		});
		cues[cues.length] = cue;
		//reset
		secCount = 0; trkCount = 0; tracks = [];
	}
 
	function secondsToMinSec(totsec) {
		var min = Math.floor(totsec / 60), 
			sec = (totsec - (min * 60));
		if (min < 10) {
			min = '0' + min.toString();
		}
		if (sec < 10) {
			sec = '0' + sec.toString();
		}
		return min.toString() + ':' + sec.toString() + ':00';
	}
};
document.getElementsByTagName('head')[0].appendChild(s);})();

I hope this helps some people, as it has me. Feel free to improve on it but if you make any changes, please let me know so that I can improve my version too.

Enjoy

Edit: Well it was not long until discogs changed their layout. I have update the code to reflect this. All should be well again.

Edit2: Bjørn Tore pointed out the titles were not being picked up. I have fixed this.

Firstly, a textbox (input type=text) is the wrong element to be using. It cannot be any larger than a single line, so a text area element needs to be used. As a text area element will not automatically expand by itself, the general approach to this problem is to use a hidden ‘staging’ element placed way off the viewable screen. The text entered into the text area is copied across to the staging element, which expands as needed and the resulting height used to resize the text area. It is not a difficult thing to achieve with jQuery and the basic structure of the plug-in can be made in relatively few lines of code.

There are a few things to watch out for however. Firstly, because we are taking the contents of a text area and placing it in a div, we need to watch out for special characters that need encoding before they will render correctly. Primarily the newline character but we also have to watch out for the other special characters that can cause issues. Nothing that cannot be fixed with regular expressions. The other thing that we need to be careful of is the CSS styles that have been applied to the text area. We require that the hidden element perfectly mimic the text area and that the text wraps at the same point. If it does not, we will incorrectly predict when the text area needs to grow. The font size and family, line height and padding need to be copied.

This would normally be the point that I post the code, but after I started writing the plug-in, I stumbled across an existing one that I could just not improve upon and decided to use it in it’s entirety. Its by a guy called Jason Frame and his plug-in can be found on github. For my particular implementation, I added the facility to have watermark text in it by utilising the great plugin over on digital bush and I also added some text parsing requirements that were required for the particular project.

Now for a word of warning. There are some problems with this approach, which I have not managed to solve (and incidentally, nor have Facebook). The text area element renders it’s content slightly differently in every browser. In the hidden element, the text will sit up directly against the edge of the div but in a text area it may not. I suspect this gap also varies from operating system to operating system but as far as I can tell, you cannot eliminate it with styles. The consequence of this is that predicting precisely when the text area needs resizing becomes very difficult. The only thing to do is to accommodate this margin of error. This can be done by making the text area display slightly taller than a single line and to always have an extra line available. That way, if things go slightly off, it is still usable. You can see this problem if you put a significant amount of dummy text into the text area and watch when it expands as you type. Instead of expanding when you reach a new line it happens at a different place. If any one manages to figure out how to completely eliminate this problem I am eager to hear how.

There have been two incidents recently however, that have made me realise that my crash course on jQuery selectors has been missing something vital. The first was when I found some time to explore the options of profiling some of our javascript code. When I first started this, the only option I could see was John Resig’s deep profiling script that injected the statistics at the bottom of the page. This had some limitations however, and I was very happy to open my news feeds soon after and find that he had added a couple of extra methods to FireUnit that enabled you to profile javascript function calls.

What I noticed straight away was that there were a lot of seemingly simple calls in our code that took a long time to execute. The reason for this was that the selectors were vague:

    $('.myclass').somefunction();

In order to find all the matches, even if there is only one, jQuery needs to traverse the entire DOM looking for any element that might have the matching class, and that takes time. By narrowing down the selector using, for instance, the type, jQuery can very quickly eliminate all other types. This speeds things up a lot.

The second incident was due to another ‘benefit’ of being a tech lead. I tend to get passed the most peculiar and hard to diagnose bugs. The bug in question was on a page that contained two autocomplete text boxes, one of which was part of a compound control. The bug manifested itself by not being able to select an item from the second autocomplete text box properly. I was handed the bug with the information that it seemed to happen only when you selected from the first autocomplete control first. Needless to say, there was a lot of poking around in the code of both the autocomplete and the compound control, which is particularly complex given the nature of the control.

Thanks to firebug‘s great console logging, I discovered that the variable that contained all the autocomplete list items seemed to be a combination of both controls. It was not too long before i discovered the code that caused the problem:

    listitems = $('.auto').children('li');

There was nothing mysterious going on at all, jQuery was asked to select all of list items in both controls, so it did.

What had happened in both of these incidents is that I had failed to mention the importance of an accurate selector in jQuery during my crash course. The new developers were blissfully unaware of the consequences of not specifying exactly which elements you want jQuery to select. What I had also failed to emphasise was another way of narrowing down and speeding up the jQuery selection – by use of the elements that you already have. In the case of the autocomplete, we already had a reference to the list itself, so it was simple:

   listitems = thelist.children('li');

This not only eliminated the cross-contamination of the two controls but seeded things up. So the rules to keep things fast and to save me headaches are simple:

• Use a selector that very accurately matches the elements you require
• Utilise references to elements you already have

1
2
3
4
5
6
7
8
9
10
11

(function($) {
    $.fn.myPlugin= function(options) {
        var settings = {
            setting1: 0,
            setting2: ''
        };
        //overload default settings
        if (options) { jQuery.extend(settings, options); }
 
        return this.each(function() {
        .....

This would allow you to pass in any number of settings, including callbacks to utilise at runtime:

1
2
3
4
5

  $('#myselector').myPlugin({ 
        setting1:1234, 
        setting2:'somesetting',
        callback1: function() {}
  });

Yesterday it occurred to me that jQuery had a neat feature that is much better than doing this – custom event binding. jQuery not only allows you to bind the DOM events to elements such as click, focus, keydown etc but because of the way it stores all the bindings, you can bind any number of custom events as well. This means that you can set your events for the plugin as follows:

1
2
3
4

$('#myselector').myPlugin({ 
        setting1:1234, 
        setting2:'somesetting'
}).bind("mycallbackevent", function() {...});

Within your plugin you would need to trigger that event like so:

$(this).trigger("mycallbackevent", [somedata]);

This technique also provides a neater alternative to public functions on your plugin. Say you wanted to initialise the plugin when a link is clicked. I would have previously setup a public function in the plugin to do this:

this.init = function() { .. }

and then run it as follows:

$('a').click(function() { $('pluginselector').get(0).init(); }

With custom events you would setup the event inside the plugin as follows:

$(this).bind('init',function() { .. });

and run as follows:

$('a').click(function() { $('pluginselector').trigger('init'); }

Perhaps I have just been writing plugins incorrectly all this time but that seems much better to me.

I really liked this as there was no page refresh for the confirmation message and it was not a modal popup, which is a little obtrusive at best. It also occurred to me that something like that would not require a huge amount of code either. This is what I came up with:

1
2
3
4
5
6
7
8
9

$.inlineconfirm = function(el, callback, parentSel) {
        var hideEl = parentSel ? $(el).parents(parentSel) : $(el);
        hideEl.hide()
        $('<div class="confirm">Are you sure? <a class="confirmyes" href="#">Yes</a> <span>|</span> <a class="confirmcancel" href="#">Cancel</a></div>')
            .find('a.confirmyes').click(function() { callback(); hideEl.show();  $(this).parents('div.confirm:first').remove(); return false; }).end()
            .find('a.confirmcancel').click(function() { hideEl.show(); $(this).parents('div.confirm:first').remove(); return false; }).end()
            .insertAfter(hideEl);
        return false;
    }

I decided on using just a function rather than a plugin, as I wanted asp.net control compatibility (see later). The function just swaps out the element(s) for the confirmation message and puts them back if cancel is pressed, otherwise it runs the callback. It utilises three parameters:

• el – The element which initiates the inline confirm. i.e. The link
• callback – A function to run if the answer is Yes
• parentSel – (optional) This is a jquery selector that identifies a parent element of el that will be replaced with the prompt. This is so that you could for instance hide an entire section of html with the ‘are you sure?’ prompt. Particularly useful to keep layouts consistent.

This is a nice easy function to use in most web development language, however, if you are using asp.net, it becomes difficult to use it with the asp controls like <asp:Button /> or <asp:LinkButton />. This is because ASP.NET likes to take control of the click events of these so that it can create its event model at the server. There is the onClientClick property which allows us to have some control over the click event but we need to pass a callback function. After a little investigating, I discovered the GetPostBackEventReference function:

mylinkbutton.OnClientClick = "$.inlineconfirm(this,function() {" & ClientScript.GetPostBackEventReference(mylinkbutton, "") & ";});return false;"

The GetPostBackEventReference returns a string of the function that will be used to invoke the postback. Just what we needed.

www.youtube.com/watch?v=pqeJFYwnkjE

It really nails the reason that as developers, we try to refactor regularly. Unfortunately refactoring is not something that people outside of the development community tend to understand and it is considered a waste of time all too often. I think use of this metaphor may just help those people understand.

There are existing plugins for sorting elements but I never like to just pile on the 3rd party plugins as that means more javascript files to include in a page. Besides, I was sure it should not be difficult.

It soon occured to me that jQuery has the built-in ability to return the elements as an array, using the .get() method and from there, it was not too long before I had my streamlined code to sort the list element alphabetically:

var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

I utilise the javascript array.sort method to sort the elements in the array and then using the jQuery append() method,  reorder them in the actual list element.