This is our first AJAX exercise. We will build an input with autocomplete capability. What's that? Head out to Google for an example: as soon as you type one character in the input field, you get autocomplete suggestions underneath.
We want to build an autocomplete input with Dictionary words
Launch your local webserver with:
rake webpackThere are three files you need to update:
index.html- the input is already in place but there are some dumb elements in the autocompleteulthat you can removestyle.css- add some stylelib/index.js- you'll start here from scratch!
To get suggestions, you can use the following API:
GET https://wagon-dictionary.herokuapp.com/autocomplete/:stemHere, you will replace :stem with the characters typed by the user. As soon as the user enters a new character (keyup maybe?), you will trigger a new AJAX call. If you look at your "Network" tab in Chrome Inspector you should see something like this:
https://wagon-dictionary.herokuapp.com/autocomplete/u
https://wagon-dictionary.herokuapp.com/autocomplete/un
https://wagon-dictionary.herokuapp.com/autocomplete/und
https://wagon-dictionary.herokuapp.com/autocomplete/unde
https://wagon-dictionary.herokuapp.com/autocomplete/under
etc.When you receive the JSON from the API, your job is to update the ul#results list with suggestions!
Once you have the basic behavior, don't hesitate to try and make the ul#results look 🎨 really good 🎨 😋