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||My iPhone 14 Pro wishlist »|