Lazy Loading

Lazy loading (also "on-demand loading" and "pagination") is a technique that delays loading non-critical data until it is required. This technique improves performance and reduces form load time. SurveyJS Form Library allows you to paginate choices in the Single- and Multi-Select Dropdown question types. This feature is configured in the same manner for both types. Users can also type in a search string to filter the choice list on the server. In this example, you can see a Dropdown question that lazy-loads a list of countries. Open the Dropdown and scroll it to the bottom to see how new list items are loaded. Switch between available JavaScript frameworks to view a dedicated demo version for jQuery, React, Angular, Vue.js, or Knockout.

To configure lazy loading, follow the steps below:

1. Handle the onChoicesLazyLoad event
   This event occurs when a question requests the next portion of choice items. Within the event handler, you need to send a request for the next portion to the server. Refer to the event description for information on the handler's parameters.

2. Enable a question's choicesLazyLoadEnabled property
   This property specifies that choices for the given question should be loaded on demand.

When you load choices from a server, choice display texts become available only after data is loaded, which does not happen until a user opens the Dropdown or Tag Box. However, a display text for a default choice item is required before that. In this case, you can individually load data for the default item within the onGetChoiceDisplayValue event handler. Refer to the event description for information on the handler's parameters.

In this demo, the onGetChoiceDisplayValue event handler is used to get the display text "France" for the default value "FRA".

Lazy Loading for Long Forms