What is autocomplete?
Given the technological era we're currently living in, the web is overloaded with information and data.
Every second website has tons and tons of data being processed in order to provide its respective users with the facility they're after. This requires careful planning, programming and testing.
User need information and websites need to deliver it as efficiently as they could. And in order to accomplish this, web developers usually take the help of dedicated frameworks, libraries, or simple features they've built themselves.
One such feature that is more than just popular in the arsenals of web developers is autocomplete.
Autocomplete is a helpful deal when it comes to searching for stuff. Let's see what the term 'autocomplete' actually means:
For example, say you want to select your city of birth while filling out an online form. As soon as you enter 'L' into the respective input field, the program displays a list of possible options that might be in your mind while you typed in the query.
As you keep on typing, the list keeps on shrinking with a list of suggestions until you get to your desirable value.
In another instance, suppose you want to enter the name of your university in an personal detail form. Now there's a good chance that you might spell, or type the university's name in some way that the website couldn't understand.
Even if the website were to list all the possible university names in the form, that wouldn't help either - in fact, it would make things even more complicated. Just imagine how many universities are there in the world!
So what the website does is that it enables an autocompleting algorithm on the input field where the university's name is to be specified. Now as soon as we type something into the field, all the matching items are displayed to us from which we can select our choice of desire.
This autocompletion means quite a few things:
- Firstly we have to type less in order to get to an end value.
- Secondly, we couldn't just enter some random value on our own, it has to be one of the choices laid out by the application.
Forget about all this. Take the example of the popular Google Search.
As soon as you type in a single character into the search box, a panel opens beneath it showcasing best possible matches of the query. This is autocomplete in action!
Advantages of autocomplete
So now that we know what autocomplete is, it's time to unravel its benefits.
Is it even worth to give an autocomplete feature to our searching fields?
Firstly appreciate the fact that a hand-tailored autocomplete feature will make selection quicker.
How long does it take type 'L' and then select 'London' from the list of suggestions as compared to typing 'London' manually.
A user only has to type in a couple of characters and the corresponding matches likewise show up from which he/she can select one (or more) matches.
Secondly, having autocomplete on desk improves the UX of a webpage. UX stands for User Experience, and is simply a measure of how good or bad is a user's experience of a website.
As you would agree, with autocomplete and end user has to do little effort in selecting a given suggestion. In contrast to typing a long university name manually, it's pretty convenient and efficient to type a short phrase or so and select from a list of computed suggestions.
Not only this, but autocomplete also makes an application look modern, performant and neat.
Without autocomplete, a user is left to move his eye from choice to choice and then select one (or more) of all them. Showing all these choices at once can surely make the webpage look overloaded with information that one might not even need.
Imagine Google Search without autocompletion - it will resemble search engines of the ancient days. Modern applications use autocomplete to power their search features.
How to autocomplete?
It's very easy to hear about an awesome feature of the web, search for it a bit, and then use a ready-made library to add its essence to our application.
However, we learn simply nothing this way!
As a developer it isn't bad at all to take the help of JavaScript libraries in our application's designing. However, this surely is undesirable if we are new to the world of programming, and have no experience in constructing libraries on our own.
Building a library teaches us a lot - programming techniques, application development, structuring out code and so on. If we can't build a library, this means that we are unaware of programming principles, JavaScript basics, real-world coding aspects, design techniques and a lot more.
All these things are what make one a developer. Without these we are merely learning to code, not learning to develop!
And if we are in such a position, then, as you would agree, it doesn't sound nice to use a given library to accomplish something we could otherwise do as well.
There exist many autocompletion libraries out there, some developered by jQuery, some by Google, some by random developers. Without any doubt, we can use these libraries to power autocompletion on our websites; but this tutorial is not about using these libraries.
It is all about creating an autocomplete library on our own, from scratch.
In this tutorial, we shall start by building an elementary autocompleter with the least amount of coding. Then from here, we'll keep on adding subfeatures to it and take it up a level each time.
These include navigation using up and down keys, customising suggestions, grouping suggestions under given group labels, sorting items into alphabetical order, highlighting matching substrings with each suggestion, enabling selection of multiple choices and so on.
Not only this, but we'll also explore different types of matching expressions, like one where the query 'al' would match "ball", "fall" etc; one where the query 'al' would match "battle", 'panel', with the 'a' coming after 'l' etc.
To end with, we'll see how to blend all these subfeatures into one single functional library where we have to just pass in some configuration to a constructor taking care of all the setup hassle itself.
Definitely it'll be quite tedious to code all these things individually and then take them under the hood of a single library. But, we all are developers, and developers ain't go easy on coding!
So let's start learning one of the most popular features out there powering searching functionalities all over the web - autocomplete.
