Welcome back to the continuation into our introduction to JQuery. Thus far, we have looked at making an ajax request out to get stock quote information.  We then made the same request using the getJSON method.  Today, we will extend further on our knowledge of getJSON, introduce some additional methods in JQuery, and add some plugins that will allow us to create an autocomplete feature for our users. So let’s get into the code!

Take a look at the HTML document below. You will notice some changes from what we have used over the last couple weeks. The difference comes in the head tag, where we are adding some additional libraries and plugins that will be downloaded to the browser on page load. Our JavaScript file when then have access to the methods associated with these libraries. Here, we are using content delivery networks (CDNs) to access the libraries that we need to add the functionality that we want. Now, let’s start looking at the additions to our JavaScript file.

So, last week we used the Quote Endpoint function from Alpha Vantage to get stock quote information (searchStockAPI). Now we want to be able to return a list of best possible matches for a term that the user has typed into the search box. For this, we will use the Search Endpoint function (matchStockAPI).  Now, in order to use the typeahead.js plugin that we downloaded, we must first configure it to what we want. And we want to configure the typeahead (autocomplete feature) when the page loads. So, we will make use of the $(document).ready JQuery function. Inside of this function is where we will configure the typeahead. First thing we need to do is tie the typeahead to our search box, which we do by using the id stockSymbol. Next, we are going to set some options for how we want the typeahead to behave. I will explain each of the options that I used, but take a look at the documentation to add your own options. Looking at the documentation, we see that the first two call outs inside the curly brackets are options to highlight the letters in the suggestions, and that the suggestions will have a minimum length of 1. The following curly brackets our options for the dataset that we will use to populate the typeahead. Again, look at the documentation, and see if you can add/change what I have here. The first option is what will be displayed in the search box after the user has clicked on a suggestion. Here, we want the stock symbol to be displayed so that our searchStock function can then search for the quote information. Next, the limit will return the first 10 matches. The source we set to matchStock, which is a call to a function that we will discuss next. The templates option allows us to use the Handlebars.js templating language to set how the suggestion will be displayed, what will be displayed if no suggestion is returned, what will be displayed while we are waiting for a response, and finally a footer. The next thing we want to do on page load is to set focus to the search box by using the .focus() method.

Now, notice that on lines 58-61, we have added in an if statement that wasn’t there last week. Because we are using a free API service, there are some limits to how many calls we can make. In our case, we can only make 5 calls per minute and 500 per day. So, if we make more than that, Alpha Vantage will send back a JSON object that contains a note describing the error. Here, we will handle the error by just displaying it to the user in the message div. You will notice this same error handling in the matchStock function as well.

Now, let’s get into that matchStock function that we are using as the source for our typeahead. If you look at the documentation concerning the source option, you will notice that it expects a function with the parameters of query, syncResults, and asyncResults. So, those are the parameters that we use in our function.  The query parameter will contain the characters that the user has typed into the searchStock text box. The other parameters will be the results of either a synchronous or asynchronous call. For our purposes, we will only use the asyncResults, since we will be making another asynchronous API request. In the nested getJSON method, you will notice some similarities with the searchStock function. We again make use of the $.each method to iterate through the data. The difference is that, instead of creating rows in a table with the data we want to create some JavaScript objects. The objects will have two properties – symbol and name. Notice, that this is exactly what we are using in the suggestion template of our typeahead. So, when the user starts typing, they will see suggestions in the form of the symbol and name separated by a comma. The asyncResults is passed the matches array containing the objects, which will the populate the suggestions. The last JQuery code at the bottom will allow the user to hit enter to call the searchStock function instead of clicking the button. Now, we need to add some necessary CSS for the typeahead to work correctly.

If you try and use the typeahead without adding the necessary CSS, you will notice that you are unable to access the suggestions. The below CSS, comes from the typeahead.js documentation that shows examples of the CSS required. The CSS below, provides some necessary styling for the typeahead to function properly. For now, you can copy the CSS and trust that it will work. Next week, when we dive a bit more into styling the page, we will go over each CSS property and discuss what they are doing.

I hope that this was an enjoyable tutorial for you to complete. Come back next week where we will finish this off and add some nice final touches to the design of the page. Remember to comment below with any questions, and share this post on your favorite social media platform. See you again next week!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s