Am I using the DATASET element wrong?

Week 251 was posted by Charanjit Chana on 2022-08-18.

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.


Tags: development, html


Tweet WhatsApp Keep Upvote Digg Tumblr Pin Blogger LinkedIn Skype LiveJournal Like