[whatwg] Authoring feedback on <datalist>

MediaWiki currently uses a search-suggest feature based on lots of
JavaScript that's used to calculate all sorts of widths and heights to
painstakingly construct an absolutely-positioned div, and reimplement
standard dropdown navigation controls on top of that.  It works pretty
well (go to en.wikipedia.org and start typing a query to see --
implementation at
<http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/common/mwsuggest.js?view=markup>),
but it's a horrible hack and doesn't integrate perfectly with the
system.  When I found out Opera implements <datalist>, thanks to the
helpful spec annotations, I tried rewriting mwsuggest.js to use
<datalist> where supported.

My primary feedback here is that a simpler JS API would *really* be
nice.  In this kind of situation, typically you receive some JSON or
whatnot from the server, so you have a JavaScript array that you want
to use for suggestions.  The code to make a given list the suggest
source for an input is something like:

var datalist = document.getElementById( 'arbitrary-id' );
if ( datalist == null ) {
	datalist = document.createElement( 'datalist' );
	datalist.id = 'arbitrary-id';
	document.body.appendChild( datalist );
} else {
	datalist.innerHTML = '';
}
input.setAttribute( 'list', 'arbitrary-id' );
while ( var i = 0; i < suggestions.length; i++ ) {
	var option = document.createElement( 'option' );
	option.value = suggestions[i];
	datalist.appendChild( option );
}

This is all quite awkward.  It was pointed out on IRC that there are
legitimate use-cases for declarative datalists (e.g.,
http://html5.lachy.id.au/), but I'd expect JS-constructed datalists to
be a much bigger use-case.  I can think of several sites off the top
of my head that use absolutely-positioned divs to provide search
suggestions to users, but none that do so statically.  So I think a
better API is needed -- preferably just

input.suggest = suggestions;

or similar.  The details aren't particularly important, but the
current API is really cumbersome when used from JS.

Received on Thursday, 21 January 2010 16:27:07 UTC