HTML 5 datalist. Have it now. Have it better.

Current implementation of HTML 5 datalist. Hurting, but idea is right.

The HTML 5 datalist is a much needed form element. What it basically does is provides two input points for one form element. One input point is of course the mouse, as with the current HTML select tag. The second input point being the keyboard in the form of autocomplete to find a element in the list. I say much needed because I think it is important to give a user two ways to select an item from a pre-defined data list. Autocomplete, although, more efficient of the two is not always intuitive for the "non-power-user". Not only that, even power users, will sometimes favor mouse selecting from a list if they are browsing with one hand or already performing a mouse action.

Mouse clicking on HTML 5 datalist causes list to be displayed. Opera 10.1 screenshot.

Keyboard on datalist element causes list to be displayed. Opera 10.1 screenshot.

Problems with HTML 5 datalist as it currently stands

Doesn't seem high on the list of HTML 5 elements being implemented by different browser vendors. Currently only Opera supports datalist.
Autocomplete needs to search and find within the any part of a string not just the first characters. This is especially useful for large datasets. Actually, I don't know much about how autocomplete is supposed to implemented via the spec. Currently, Opera displays the entire list no matter what is keyed in. :P
Where is the dropdown arrow? There is no visual indicator that clicking on the element will render the list.
Would be nice to define datalist with JSON rather than current datalist tag soup. Same issue with rendering HTML select element where you have a sea of <option> tags.
Need to be able to disable the mouse click for displaying datasets too large. For large datasets displaying a huge list is bad for usability. Mouse selecting could take 15 to 20 seconds to find an item in a dataset over, say, a thousand entries. Be able to enforce only autocomplete in these scenarios.

HTML 5 datalist in its current implementation by Opera is barely useful to the point of being meaningless. However, the idea of two input points for a HTML form element is a worthy one.

The anecdote to the sickly HTML 5 datalist: Datalist class.

Born out my need on some client work to provide a dual input form element I created the Datalist class. I created the initial version probably about 4 years ago. Since then I have loving curated it and all features and options come out of real world web application usage. The Datalist class requires Prototype 1.6.1 and latest Scriptaculous (just effects.js and controls.js).

Screenshots of Datalist class.

Normal select box behaviour. Click button and render the list

Datalist class screenshot: Clicking on the button to the right of the form element renders the list

Datalist class screenshot: Autocomplete works as expected and matches anywhere on the string by default

Quick start guide

Here are the basics for getting the Datalist class up and running locally. Clone the code from http://github.com/minimul/datalist. Then take the following HTML snippet and save it inside the root folder of the downloaded code calling it test.html.

Ok, Christian. Enough. Let me see the demo page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Datalist class demo</title>
    <script src="lib/prototype.js" type="text/javascript"></script>
    <script src="lib/effects.js" type="text/javascript"></script>
    <script src="lib/controls.js" type="text/javascript"></script>
    <script src="lib/data.js" type="text/javascript"></script>
    <script src="datalist.js" type="text/javascript"></script>
  <style>

    div.autocomplete {
      position: absolute;
      width: 250px; /* will be adjusted by script.aculo.us */
      background-color: white; border: 1px solid #888;
      margin: 0px; padding: 0px;
    }
    div.autocomplete ul {
      list-style-type: none; margin: 0px; padding: 0px;
    }

    div.autocomplete ul li.selected { background-color: #ff9;}
    div.autocomplete ul li {
      list-style-type: none; display: block;
      font-family: sans-serif; font-size: small; color: #444;
      margin: 0; padding: 0.1em;
      line-height: 1.5em;
      cursor: pointer;
    }

    div.dataListDisabledMsg  { position:absolute;padding:2px;background:#ff9;border:1px solid #888;font:400 8pt Tahoma; }
    div.dataListActivityIndicator { width:6px;height:6px;background:red;overflow:hidden; }

  </style>
  </head>
  <body>
    <div id="parentContainer">
      <p>
        <input type="text" id="states" value="" /> <img src="dropdown_simple.gif" />
      </p>
      <div style="display:none;" class="autocomplete" id="autocomplete_choices"></div>
    </div>
    <script>
      document.observe( 'dom:loaded',function(){
        // states_json comes from data.js
        $('states').datalist(states_json);
      });
    </script>
  </body>
</html>

This will get you up and running with a example that is similar to the screenshots up above. Moreover, in the source code is the demo page, which is index.html. There are also a rich set of options detailed in the Datalist documentation page.

Pushed on 02/23/2010 by Christian