Creating autocomplete for input

One common functionality usually related to search fields or input is that we can guess the text after typing some of the data. This can be any field that we have in our database such as employee names. In this recipe, we will take a look at some of the possible ways to create autocomplete for input; it is up to you to decide what is best fit for your use case.

Getting ready

In this example we are going to use a sample JSON file that will simulate a result returned by a REST API. The file can be retrieved from the examples, and it's with the name countries.json where we have a list of objects—mapping of countries with their corresponding languages. In the example, we will use both jQueryUI (http://jqueryui.com/) and a library called Chosen (https://github.com/harvesthq/chosen). Why use both? Well, we can use either of them, or none, but the idea here is to show different ways of creating a good user experience with list selection. Additionally, as we will...