Development Archives - Web Development

Something that has been grinding my gears recently is web agencies posting in their advertising how many websites they have made. Kudos to you on building some websites. What those figures don’t tell you is how happy the customer was with the work, what sized project they were, and where those customers are now.

There is a big difference between a 3-5 hour single page brochure website thrown together using existing templates so it looks the same as many other websites out there, as opposed to a large e-commerce, corporate intraweb or business processes site with hundreds of moving parts. Or from a blank canvas for the client to fill in content, to a well copywritten and targetted, designed and optimised website built to last.

Our job as web developers isn’t actually about selling code. Yes that is part of it, and we take pride in a job well done. But actually, we sell human interaction. Service. Was the process of getting to the destination with your software or website enjoyable, did we cover all the requirements and add value to your ideas, amplifying them, helping your business thrive. And do you feel good at the end of it. Have you got the support you need to take things to the next level?

So whilst you may see ads around, boasting thousands of websites delivered, trust people more than you trust billboards. Word of mouth, and results, speak far stronger than digits plastered about.

Ran into a peach of an issue on friday – client complains of a report being ‘glitchy’. They have a learning management system which contains a report with a filter that lists all student ID’s in an HTML select element. No problems you’d think… until you realise there are 13,000 plus students, all listed out as options within the select element… and the page has performance issues trying to load all the options.

What can we do?

So my first instinct was to throw some javascript at it, and convert the problem from being a select element to being a div with some javascript to handle displaying a much smaller subset of options depending on what is being typed – Select2 is my go-to javascript select replacement library, so we threw that at it.

Did it work? No. Same performance issues, but they were less as you filtered down the result set by entering digits… So its a bit of a better look, but it still ain’t right. What a pickle! Where to now?

After a period of trawling Google search results for a solution, I’ve stumbled upon the datalist html element. There is talk of it being a more efficient option as a select alternative… so here is what I’ve done:


jQuery('#id_filter_fuserfield_idnumber').after('<input type="text" list="filt_students" id="id_filter_fuserfield_idnumber_entry"/><datalist id="filt_students"></datalist>');
var opts = "";
jQuery('#id_filter_fuserfield_idnumber option').each(function(k,v){ 
    opts += "<option "+jQuery(v).attr("selected")+">"+jQuery(v).text()+"</option>"; 
	if(jQuery(v).attr("selected")){
		jQuery('#id_filter_fuserfield_idnumber_entry').val(jQuery(v).text()); 
	});
}
jQuery('#filt_students').append(opts);
jQuery('#id_filter_fuserfield_idnumber').hide();
jQuery('#id_filter_fuserfield_idnumber_entry').on('change',function(){
	jQuery('#id_filter_fuserfield_idnumber').val(jQuery('#id_filter_fuserfield_idnumber option:contains("'+jQuery('#id_filter_fuserfield_idnumber_entry').val()+'")').attr('value'))
});

So to explain this:
– add text input and link empty datalist after the select element (note no name on the text input so data not submitted with form).
– populate the datalist with items from the select element. If an item from the select options is marked as selected, update the text box to reflect that.
– hide the original select element.
– listen to changes on the text input so that when a value is chosen, the select has its value updated to match the chosen value.

Testing this, it is really fast. Like – really fast. No performance issues with 13,000 options to chose from, and all behaves as expected very similar to a select inpout, but you have the advantage of being able to use the text input to start typing and filter the list of elements to chose from accordingly. Vary cool!

In summary – don’t always reach for Select2 to solve select problems – the datalist element is your friend, and offers similar basic functionality (yeah I know – select2 can do a bunch more esp when it comes to ajax loading etc, so horses for courses, but if you don’t need the extra functinality…). I know I’ll be looking at using datalists more going forward.