W3C home > Mailing lists > Public > whatwg@whatwg.org > January 2010

[whatwg] Authoring feedback on <datalist>

From: Aryeh Gregor <Simetrical+w3c@gmail.com>
Date: Thu, 21 Jan 2010 19:27:07 -0500
Message-ID: <7c2a12e21001211627n3c922f54g619a060354cd7ab8@mail.gmail.com>
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
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

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:20 UTC