[whatwg] input element list attribute and filtering suggestions

[Aryeh Gregor]

On Fri, Dec 31, 2010 at 12:07 PM, Jonas Sicking <jonas at sicking.cc> wrote:
> Indeed. But google is fairly alone in this design. I've seen plenty of
> other websites with dynamically populated autocomplete lists which
> doesn't put buttons in the list itself. For example the email
> autocomplete in bugzilla.mozilla.org.

Wikipedia's new search suggestions (part of the Vector skin) don't
include images or anything, but they do boldface the parts of the
suggestion that match what you've typed.  They also add an extra
option at the bottom to let you actually search for pages containing
the term instead of just looking for title matches.  So that needs
markup too, not just plain text.

But I agree that a purely text-based suggestion box would be useful to
support anyway.  I did try writing this up for MediaWiki -- you can
see the code at
<http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js> (my
modifications to the preexisting code are in
<http://www.mediawiki.org/wiki/Special:Code/MediaWiki/61348>).  But I
disabled it because Opera was the only browser implementing datalist
at the time, and its implementation had a fatal flaw.  Now it's been
mostly superseded by the fancier implementation I mention above, but
flipping os_use_datalist to true in that file seems to work pretty
well in Firefox.  The old suggestion system is still used in
non-Vector skins for now, so if you have some way to flip the
variable, you can try it out on Wikipedia at a URL like
<http://en.wikipedia.org/wiki/Main_Page?useskin=monobook>.

Noticeably, the list automatically incorporates extra suggestions
based on browser form memory, and uses the system colors instead of
site-determined colors.  Both of these could be viewed as either good
or bad, I guess.  The datalist-based solution also has the suggestions
line up exactly, while with the old way, it's a few pixels off (at
least in Chrome).

I provided some spec feedback at the time:
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-January/024794.html>.
 I really agree with Hixie that a nicer JS API is necessary if you
want authors to actually use datalist this way.  It's gratuitously
painful to update the list by fiddling with the DOM instead of just
using a JavaScript array.  Although it's still way, way easier than
having to fake the box yourself with absolute positioning.

I just enabled the <datalist>-based suggestions in MediaWiki trunk,
for 1.18, since they work nicely for Firefox 4 (I've blacklisted
Opera): <http://www.mediawiki.org/wiki/Special:Code/MediaWiki/79363>.
But I don't know how long that suggest framework will survive, given
the newer and fancier one that's part of the new Vector skin (for
which datalist is too limiting to be useful).