In order to make an internet user’s experience more pleasant, some websites will have input fields that autocomplete as the user is typing. I find the autocomplete feature to be very pleasing and always appreciate the websites that have them.

In this post, I am going to show you how to build an autocomplete input that uses data from an external API. In order to do the previous, we are going to use a Javascript library called Select2 and the Xignite TypeAhead API to build a field that will autocomplete a companies stock symbol.

First, we need to look at how we go about making an API request to Xignite. To the previous we would need to make an AJAX call to the following URL:

`https://search.xignite.com/Search/Suggest?parameter=XigniteFinancials.GetCompanyBalanceSheet.Identifier&term=(company name)

You place the company you want to search for after ‘term=’. For example, if we wanted to search for “Apple” we would use this URL.

The response from the request searching for “Apple” would be JSON data and it would look like the following:

The response from Xignite will then be used to populate the data in the autocomplete.

I have created a JSFiddle for the rest of this tutorial and it can be found here. I have added comments to the JavaScript and that should guide you and allow you to adapt this to any other APIs you want to use.