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