Autocompleters power input elements on webpages to show suggestions matching the query entered, which can in turn quicken the process of selecting an item.



Course Duration

2 hrs 43 mins








  • HTML

    HTML is the starting point of essentially everything, hence it is a requirement.

  • CSS

    CSS is obviously needed for the styling concerns throughout this course.

  • JavaScript

    JavaScript is required to add interactivity to the autocompleter.

Course overview

Autocomplete is to look for the matches of a given query and show them as a list of suggestions for the query. As the name suggests, an autocompleting algorithm tries to automatically complete a given query.

This has a couple of benefits. Firstly, it reduces the amount of time spent in entering a given value - we type in a query, a list of suggestions is consequently shown, we select one suggestion from it, and we are done. Secondly, it improves the UX of a webpage by making it look professional and performant.

Big names out there - such as Google, Facebook, Microsoft, Amazon - employ the use of autocompletion algorithms in their search bases to make their applications robust and allow for quicker option selection. Apart from these big names, autocompletion is now a general feature of the web.

Many libraries have been developed to power it on webpages, and many new dimensions have been given to it to make it even more powerful.

Learning outcomes

  1. How to code one of the most used features of the web, from scratch.
  2. How to dissect a feature and code its basic structure in HTML and its logic in JavaScript.
  3. The way to approach programming problems by breaking them down into smaller subproblems, solving the subproblems and then combining the solutions to these subproblems to solve the main problem.
  4. How to work with JavaScript key events. Specifically, we'll be tracking the code of the key pressed, see if it matches the code for the up or down key, and then perform a corresponding action if it does match.
  5. How to efficiently work with functions where code blocks are seen to be repeating.
  6. How to construct a JavaScript library that takes in some configurations and structures the underlying code accordingly.

Table of contents

  1. Foundation

    In this single unit we'll cover all about autocompletion. We'll start with a skeletal autocompleter and then successively improvise it with adding a subfeature to it. These subfeatures include arrow navigation, sorting, grouping, highlighting and much more.


  • What if I get stuck somewhere in the course?

    If you're having a hard time understanding a given concept in the course, feel free to reach out to me at, describing the issue you're facing. I'll try my level best to help you out.

  • Some important topics are missing from the course. Why is that so?

    The courses on Codeguage are released while they are still under construction so that learners can get early previews. As I continuously work on adding more and more content to the courses, if a given topic isn't covered today, there's a high chance that it's already under way and will show up very soon. You can follow Codeguage on Twitter to be updated with all the latest content releases.

  • How can I ask any general questions related to the course's content?

    Write to me at

It's different the 'Codeguage way'


When you have a robust foundation, with the fundamentals crystal-clear, your mind will intrinsically get that ability to handle any kind and level of complexity.


With a comprehensive resource that covers literally every aspect of a given topic, your time is spent practicing the learnt concepts, not resolving confusions and basic questions.


Coding is a detailed craft. Likewise, any resource trying to teach it in any way should be detailed as well, or else people will have to acquire those integral details from different places in a fragmented and haphazard manner.


Structure is vital to an intuitive learning experience of a given resource. Without structure, the right concepts get introduced at the wrong times, ultimately leading to confusion and breaking the desired flow of comprehension.

Let's start the learning!