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!
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.
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!