Writing the Search Form component
Now that we know how to create a component, and we put the base of our Search Form component, we can try to look for the requirements for this component.
A designer will review the View later, so we need to keep it simple to avoid the need for multiple changes later.
From our analysis, we find that our competitors use these components:
- Autocomplete field for the city
- Calendar fields for check-in and check-out
- Selection field for the number of rooms, number of adults and number of children, and age of children
This is a wireframe of what we should build (we got inspired by Trivago):
We could do everything by ourselves, but the easiest way to realize this component is with the help of a few external plugins; we are already using jQuery, so the most obvious idea is to use jQuery UI to get the Autocomplete Widget, the Date Picker Widget, and maybe even the Button Widget.
Adding the AMD version of jQuery UI to the project
Let's start downloading the current version...