1 Thing A Week 1 Thing
A Week

Am I using the DATASET element wrong?

Week 251.0 — 18th August '22

I really like how I've built the search feature here on 1 Thing A Week. It's a text field that is driven by a DATASET element, dynamically populated by the letters you type. Works great on desktop but mobile is a slightly different story and an issue I need to address.

On iOS at least, you get the options presented as keyboard suggestions rather than a true drop down. I think this makes sense, otherwise every key press would cause an updated select menu to appear obscuring the keyboard.

But once you've made your selection, you can't search on mobile.

<input type="text"
    name="q"
    id="q"
    list="search-options"
    placeholder="how do I take better photos?">
<datalist id="search-options"></datalist>

The very basic version of the HTML markup above is what I have, the datalist is populated with entries and presented in the UI... but maybe this is the wrong way to do this? A static list is no better, but not being able to submit is a little odd although I don't have a submit button either.

The ultimate solution for mobile and for desktop would be to take you to the right page if you made a selection but right now it just pops the text in and takes you to DuckDuckGo.

As I said, maybe I'm not trying this all together correctly and it certainly needs a revisit for mobile.

Are you using the DATASET element? Would be great to see more examples of this feature in the wild.

More from 1 Thing A Week
« Exploring some more of the UK How to use mailto links and the different properties available

Advertisement

Notable

Nothing notable this week 😞

Jump to notable items for Week #250 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit