[whatwg] Authoring feedback on <datalist>
Aryeh Gregor
Simetrical+w3c at gmail.com
Thu Jan 21 16:27:07 PST 2010
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.
More information about the whatwg
mailing list