Country Autocomplete

Page Elements

We added the following elements:

• 3 text input elements: name, email and country.

• Repeater: for displaying the country name suggestions.

• Submit button: for submitting the form.

Page Code

First we declare some constant values, such as the colors of the repeater’s items and the maximum number of items to be displayed.

We also manage 3 global variables:

• listSize: the amount of currently displayed items in the list.

• currIndex: the index of the current selected item in the repeater.

• debounceTimer: helps to provide smoother behavior for the search functionality.

When the site visitor starts typing in the country input element, we send a query to the Countries collection. This query finds the country names that start with the current input value. Those countries are displayed in the repeater, with each country in its own repeater item. Using the keyboard arrow keys, the user can navigate up and down the repeater items and select a country by pressing the Enter key. The country menu can be closed by pressing the Esc key. Visitors can also use the mouse. When one navigates to an item using the keyboard arrows, that item’s color changes to indicate it will be selected if the Enter key is pressed.

When the visitor clicks the Send button, the form is submitted to another database collection.