Tags: tos

440

sparkline

Sunday, March 28th, 2021

Picture 1 Picture 2

Freshly shorn, thanks to @wordridden.

Tuesday, March 2nd, 2021

Picture 1 Picture 2 Picture 3 Picture 4

A year of gussying up instant ramen for lunch.

Thursday, January 21st, 2021

Picture 1 Picture 2

On a call with @CassieCodes and Brody, who is contributing a lot—a very good doggo!

Thursday, December 31st, 2020

Picture 1 Picture 2 Picture 3 Picture 4

Seeing out 2020 in style.

Thursday, November 12th, 2020

Picture 1 Picture 2

Homemade gyoza!

Thursday, October 15th, 2020

Picture 1 Picture 2 Picture 3

Cracking open a @Beerleft to toast fifteen years of @Clearleft!

Sunday, October 11th, 2020

Picture 1 Picture 2 Picture 3

Dim sum, mapo tofu, and dumplings. 🥟

Wednesday, September 16th, 2020

Picture 1 Picture 2 Picture 3

Last of the summer harvest: beets, chard, and spinach.

Wednesday, September 9th, 2020

Picture 1 Picture 2 Picture 3 Picture 4

Flint House chef’s menu.

Saturday, September 5th, 2020

Picture 1 Picture 2

Tunes in the park.

Wednesday, August 26th, 2020

Submitting a form with datalist

I’m a big fan of HTML5’s datalist element and its elegant design. It’s a way to progressively enhance any input element into a combobox.

You use the list attribute on the input element to point to the ID of the associated datalist element.

<label for="homeworld">Your home planet</label>
<input type="text" name="homeworld" id="homeworld" list="planets">
<datalist id="planets">
 <option value="Mercury">
 <option value="Venus">
 <option value="Earth">
 <option value="Mars">
 <option value="Jupiter">
 <option value="Saturn">
 <option value="Uranus">
 <option value="Neptune">
</datalist>

It even works on input type="color", which is pretty cool!

The most common use case is as an autocomplete widget. That’s how I’m using it over on The Session, where the datalist is updated via Ajax every time the input is updated.

But let’s stick with a simple example, like the list of planets above. Suppose the user types “jup” …the datalist will show “Jupiter” as an option. The user can click on that option to automatically complete their input.

It would be handy if you could automatically submit the form when the user chooses a datalist option like this.

Well, tough luck.

The datalist element emits no events. There’s no way of telling if it has been clicked. This is something I’ve been trying to find a workaround for.

I got my hopes up when I read Amber’s excellent article about document.activeElement. But no, the focus stays on the input when the user clicks on an option in a datalist.

So if I can’t detect whether a datalist has been used, this best I can do is try to infer it. I know it’s not exactly the same thing, and it won’t be as reliable as true detection, but here’s my logic:

  • Keep track of the character count in the input element.
  • Every time the input is updated in any way, check the current character count against the last character count.
  • If the difference is greater than one, something interesting happened! Maybe the user pasted a value in …or maybe they used the datalist.
  • Loop through each of the options in the datalist.
  • If there’s an exact match with the current value of the input element, chances are the user chose that option from the datalist.
  • So submit the form!

Here’s how that translates into DOM scripting code:

document.querySelectorAll('input[list]').forEach( function (formfield) {
  var datalist = document.getElementById(formfield.getAttribute('list'));
  var lastlength = formfield.value.length;
  var checkInputValue = function (inputValue) {
    if (inputValue.length - lastlength > 1) {
      datalist.querySelectorAll('option').forEach( function (item) {
        if (item.value === inputValue) {
          formfield.form.submit();
        }
      });
    }
    lastlength = inputValue.length;
  };
  formfield.addEventListener('input', function () {
    checkInputValue(this.value);
  }, false);
});

I’ve made a gist with some added feature detection and mustard-cutting at the start. You should be able to drop it into just about any page that’s using datalist. It works even if the options in the datalist are dynamically updated, like the example on The Session.

It’s not foolproof. The inference relies on the difference between what was previously typed and what’s autocompleted to be more than one character. So in the planets example, if someone has type “Jupite” and then they choose “Jupiter” from the datalist, the form won’t automatically submit.

But still, I reckon it covers most common use cases. And like the datalist element itself, you can consider this functionality a progressive enhancement.

Saturday, August 22nd, 2020

Picture 1 Picture 2

Played some tunes in the park.

Thursday, August 13th, 2020

Picture 1 Picture 2

Beach BBQ from https://www.humbleplates.co.uk/woodandcoal 🍗 🥩

Tuesday, August 11th, 2020

Picture 1 Picture 2

Walking along the beach at dusk.

Monday, August 10th, 2020

Picture 1 Picture 2

Hanging out with the cat.

I don’t have a cat.

The cat doesn’t know that.

Picture 1 Picture 2

Whoever is plastering educational posters around the neighbourhood …I approve!

(Previous specimens included the periodic table and a solar system chart.)

Saturday, August 8th, 2020

Picture 1 Picture 2

Played some tunes in the park today.

Thursday, August 6th, 2020

Picture 1 Picture 2 Picture 3 Picture 4

Strolling along the seafront with the Clearleft crew.

Friday, July 24th, 2020

Picture 1 Picture 2

Celebrating.

Sunday, July 19th, 2020

Coldwater.Science

The World Ocean is as close as you can get to outer space without leaving Earth. It’s an entirely different universe, nothing like the life we have on land.