説明例
In this example, we created a collection named Countries, which stores a list of country names. When the site visitor starts typing in the country field, suggestions for country names that have the same prefix as the characters the visitor typed are displayed using a repeater. The site visitor can either continue typing or choose his country using the keyboard or the mouse.
どのように構築したか
ページ要素
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.
ページコード
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.
関連例
これは役に立ったか？
|
ご意見ありがとう！
City Weather
Get weather information according to city
中級
ページの状態を維持する
動的なページに移動している間、リピーターの状態を維持する。
中級
クイズの作成
データベースコレクションからランダムに問題を選択するクイズを作成します。
中級