Weekly UI Challenge Week 2 Day 4: Integrate autocomplete functionality

Welcome to Week 2, Day 4 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 four, our goal is to…

Integrate autocomplete functionality

Most search bars nowadays have some sort of autocomplete functionality to users find the most accurate web page/result from your site/app. For such search components like Facebook's and Google's, there's a bit of machine learning involved, but we won't get into any of that tonight.

This component just needs to list a few options that may be the most searched or prominent articles/results that the app/site wants to have appear. It would be best practice to also let users search without having to select an autocompleted option, but sometimes that makes sense for certain types of search implementations.

Following the original design I created, this is what I've got for Day 4:

My implementation offers up some music genres, as if it was added to a music blog or research site; I used PayPal's Downshift library, created and written by Kent Dodds, for the autocomplete functionality. I had a bit of trouble getting it fully working, so my coded version is not 100% beautiful, but it will get the job done!

Here is an animation of the autocomplete functionality in action:

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

1. (Sunday 4/15) Design component ✅
2. Input field ✅
3. Submit button ✅
4. Integrate autocomplete functionality 🎯
5. Past search term indicators
6. 100% a11y score
7. Tweaks, refactors, fixes