Progressively enhancing autocomplete
Friday, October 26th, 2007I like Autocomplete as a design pattern. It allows you to find things a lot faster than using a normal search box and saves you having to go through a search result page. Autocomplete means progressively enhancing a normal search box to provide a faster and more channeled way to find information. Good autocomplete controls do that in a totally unobtrusive manner and load the extra information only on demand and when the user requires it.
However, there is another use case I haven’t seen covered properly yet: what if I want to offer a defined, small amount of options and a full search but not rely on JavaScript? The solution is to use a list of links followed by a search box:
Wouldn’t it be cool to use this as a fallback when JavaScript is not available and use this information to seed an autocomplete control when it is? Well, you can.
Naturally at work I keep running into the YUI Autocomplete control and this one has the option to use a JavaScript array or even a JavaScript function as the data source for the options. We can easily use this to get the information from the list of options:
function doAutoComplete(){
var optionsLinks = opts.getElementsByTagName('a');
var ds = [];
for(var i=0;optionsLinks[i];i++){
ds.push(optionsLinks[i].firstChild.nodeValue);
};
var acDataset = new YAHOO.widget.DS_JSArray(ds);
acDataset.maxCacheEntries = 0;
var ac = new YAHOO.widget.AutoComplete('s','autocompcontainer', acDataset);
};
function YAHOO_config_ac_run(o){
if(o===undefined){
addJS('yahoo-dom-event/yahoo-dom-event.js');
} else {
switch(o.name){
case 'yahoo-dom-event':
addJS('animation/animation-min.js');
break;
case 'animation':
addJS('autocomplete/autocomplete-min.js');
break;
case 'autocomplete':
var l = document.createElement('link');
l.type = 'text/css';
l.rel = 'stylesheet';
l.href = 'http://yui.yahooapis.com/2.3.0/build/autocomplete/assets/skins/sam/autocomplete.css';
document.getElementsByTagName('head')[0].appendChild(l);
YAHOO.util.Dom.addClass(document.body,'yui-skin-sam');
doAutoComplete();
break;
};
};
function addJS(url){
var head = document.getElementsByTagName('head')[0];
var s=document.createElement('script');
s.src = 'http://yui.yahooapis.com/2.3.0/build/' + url;
s.type='text/javascript';
head.appendChild(s);
};
};
YAHOO_config = {
listener:YAHOO_config_ac_run
};
YAHOO_config_ac_run();
Putting it all together you get an autocomplete control with a list as a fallback. Try turning JavaScript on and off to see the difference.
[tags]autocomplete,yui,progressiveenhancement,unobtrusive,webdevtrick[/tags]
!["Open]("http://farm3.static.flickr.com/2116/1552753330_d4c40d1132_m.jpg")
!["Break]("http://farm3.static.flickr.com/2283/1536271756_c0da3d5f9b_m.jpg")
