Home > Tutorials > Autocomplete

Autocomplete

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

Start Learning View Course

Course Statistics

  1. Difficulty Level: Average
  2. Prerequisites

    HTML,  CSS,  JavaScript

  3. Units
    1
  4. Chapters
    9
  5. Quizzes
    0

Things To Know

What is this course about?

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.

What will you learn in this course?

In this course you'll learn:

  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.

... and much more.

Why should you take this course?

There have to be reasons for you to take this course, right? Some solid reasons. After all, if we're spending our time in something, then it ought to be rewarding. And definitely there are a couple of benefits of learning how to autocomplete.

  1. Firstly you'll learn a popular technique used all around the web. You'll closely understand its microscopic concepts and how to connect with one another to make it work as a single unit.
  2. Secondly, you'll become a better JavaScript developer and a programmer. As we develop things on the web, we learn new concepts, new theories, new design techniques, which in turn skyrockets our skills and confidence in programming.
  3. Many autocompleting libraries out there, provide us with one feature or the other, but not with the whole set of features we may desire. In this tutorial, we'll create an autocompleter of our own choice that has all the subfeatures we desire, like grouping, sorting, highlighting and so on and so forth.

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.

Let's Begin Learning.

Start Learning

More Courses

Learning shouldn't stop at just one course!

JavaScript

Make your web pages interactive and dynamic

Enroll »
AJAX

Reload content without reloading the whole page

Enroll »
CSS

Give your web page the look you want

Enroll »
JavaScript RegExp

Matching patterns within strings in JavaScript

Enroll »
Advanced JavaScript

The real-pro aspects of JavaScript

Enroll »
Sliders

Divide content into different slides

Enroll »
Lazy Loading

Learn to load images when the need be

Enroll »
Python

A simple and powerful programming language

Enroll »
Elementary Logic

The science of reasoning

Enroll »