In this exercise, you will implement an autocompleting input field as a web component.
Several existing autocomplete components would serve your purpose quite well. However, it is fairly easy to create your own as this exercise will show you. Creating your own autocomplete component as a web component makes it even easier.
The figure shows an autocomplete web component that internally uses an <input> and a <datalist> element.
Install the required packages by writing npm install when you are in the folder autocomplete.
To have something to contact, to retrieve some data from a number of football teams, you need a simple local
server up and running. You find the code of the server in the folder server. Do not touch any of the code in the folder.
- Open a new terminal window.
- Start the server by writing
npm run server. - The server will now be up and running listening on http://localhost:3000 (see server/app.js for details).
The server provides a very simple and RESTful API. Read the documentation and why not even test the API using Postman.
In the folder ./client/source/ you're free to do what you need to do to implement an autocomplete web component.
Autocomplete is a well-known feature of many applications. Start typing in a search, and suggestions are offered before you’ve even finished typing. In this exercise, the web component should offer suggestions for football teams. You retrieve the suggestions from the server you started earlier.
Implemented correct your web component should suggest when typing the word “ci”:
- Leicester City
- Manchester City
- Stoke City
- Swansea City
When you type anything that completely matches any of the suggestions a selection has been made.
For more details of the exercise, look at the recorded demo.
- <input>
- <datalist>
- Use an attribute to define the API call to retrieve the suggestions.
- Let the web component trigger an event when a selection has changed.