Contrib.social

Allow FAPI usage of the datalist element

Open on Drupal.org →
Created on 22 May 2012, over 12 years ago
Updated 5 September 2023, about 1 year ago

We need to implement the datalist element in FAPI, and hopefully Field API as well. In #1512194: Use HTML5 datalists for autocomplete → , it was suggested this be broken out into a separate issue as that issue focuses more on updating our autocomplete implementation, and there are concerns regarding accessibility and dynamic needs (putting really large datasets in markup won't fly) that go along with that.

However, this element, which works like an autocomplete list in the browsers that support it, doesn't necessarily need to be paired 1:1 with our autocomplete implementation. It doesn't need to be dynamic, it won't always be a huge dataset and there is a perfectly reasonable way to implement it in a way that degrades gracefully in browsers that don't support it.

Quote from Comment #14 → :

According to HTML5 Please, it is recommended as safe to use: http://html5please.com/#<datalist>

One of the options there, instead of directly tying it to our autocomplete widget and having to polyfill it, is to output it is a <select> list inside the <datalist> element. Jeremy Keith wrote a post about it. If you look at this in Firefox vs. Chrome, it's actually quite elegant:


Check out the example yourself.

The code looks like this:

<form>
  <label for="source">How did you hear about us?</label>
  <datalist id="sources">
    <select name="source">
      <option>please choose...</option>
      <option value="television">Television</option>
      <option value="radio">Radio</option>
      <option value="newspaper">Newspaper</option>
      <option>Other</option>
    </select>
    If other, please specify:
  </datalist>
  <input id="source" name="source" list="sources">
  <input type="submit">
</form>

Personally, I think this could be a good option for Drupal. It could be implemented as an option for "list" fields, completely separate from the current autocomplete functionality. This also would eliminate the large dataset issue. So... it's not exactly what's being proposed in this issue, and it would likely require adding Select (or other) functionality to core, but it's pretty useful, and requires zero JavaScript, so I think it's an option worth considering.

✨ Feature request
Status

Active

Version

11.0 🔥

Component
Form  →

Last updated about 3 hours ago

Created by

🇺🇸United States Jacine New York

Live updates comments and jobs are added and updated live.
  • html5

    Implements and supports the use of HTML5.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024