Welcome to Week 2, Day 5 of my Weekly UI challenge! Week 2 will focus on a search bar UI component; each day throughout this following week, I will pick one subelement of the design to implement. For day five, our goal is to…
Add past search term indicators
When you use a search engine– especially one with autocomplete features– you're usually not just interacting with a server. The most advanced search systems implement some sort of machine learning to make search results appear faster and more relevant.
We won't be building a machine learning platform today, but adding indicators (or in my case, a separate list below the autocomplete options) for terms that have already been searched. This gives users an opportunity to revisit a search they already completed, or in other cases avoid making the same search again.
Following the original design I created, this is what I've got for Day 5:
For consistency's sake, the past searched terms sit right below the autocomplete items. If you had a fully functioning search platform, you could populate this list with real results, but in my case, I just used a static list of terms that one may search in my fictional music app.
Here is an animation displaying the past search term list:
Now it's your turn
I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)
You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.
Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.
Happy coding! 🎉
Week 2 Calendar
- (Sunday 4/15) Design component ✅
- Input field ✅
- Submit button ✅
- Integrate autocomplete functionality ✅
- Past search term indicators 🎯
- 100% a11y score
- Tweaks, refactors, fixes
Top comments (0)