Refined Dropdown Questions: Multiselection, Custom Item Templates, Lazy Loading

What’s new for SurveyJS Single-choice Dropdown question and introducing a new Multi-Select Tag Box question.

Single- and multi-select dropdown questions allow respondents to select single or multiple answers from a dropdown list. We refined our single-selection Dropdown question and implemented a new multi-selection Dropdown (so-called Tag Box) question.

The 3 most exciting features you need to know about are:

• The Search-as-you-type feature with server-side filtering
  Simply type in the input area to bring up a list of possible matches.
• Custom HTML Item Templates
  Create an HTML template to customize the appearance of drop-down items.
• Lazy Loading
  Ensure smooth operation even with hundreds of items with the Lazy Loading feature.

Quick Overview

Enhanced Dropdown with In-place Incremental Search

Add Dropdown to your questionnaire to allow respondents select a single answer from a list of choices. Users can easily look for a required option by manually typing a search query right inside an input box.

View Demo: One choice — Dropdown question.

To supply a list of drop-down choices, specify a static item list or retrieve items from an API endpoint using the choicesByUrl setting.

View Demo: Dropdown + RESTful.

A new Tag Box Question

No more third-party widgets for the multi-select dropdown. With the built-in Tag Box question, users select multiple items — tags — from a predefined list of drop-down items. Items can be preconfigured or fetched from an API endpoint. Items appear in a compact way in a single edit box.

View Demo: Multi-Select Tag Box

Key Features

Easy Navigation

Users can type in the editor and filter a drop-down item list by the entered string. The ARROW UP, ARROW DOWN, and ENTER keys let respondents navigate to the editor’s items and select them.

In-place Incremental Search

Start typing search text right inside the text box to quickly locate a required option.

Lazy Loading

Don’t be concerned if you need to supply large data for your Dropdown and Tag Box. The lazy loading feature allows widgets to load items on demand. Overall, this drastically increases the performance and enhances user experience even if Dropdown and Tag Box questions contain hundreds of choices.

View Demo: Dropdown with Lazy Loading

Item Templates

By default, Dropdown and Tag Box questions display choices as a list of text items.

Create an HTML template and define a custom structure and appearance of drop-down items. Assign the name of a custom template element to the itemComponent question property.

Demo: Tag Box with a Custom Item Template
Run the following example to learn how to configure an item template for a Tab Box question.

Demo: Dropdown with a Custom Item Template
Refer to surveyjs.io for a demo: Dropdown with Custom Item Template.

Tag Box: Hide Selected Items from a drop-down list

By default, selected items persist in the drop-down list. If you wish to hide selected items from the list, just enable thehideSelectedItemsoption. Now, selected items unavailable in the Tag Box dropdown. This nice option makes it simpler for users to determine which items were already selected and search for available items in the list.

You’re always welcome to share your thoughts in the comments below. For technical assistance, contact us at Support Center and GitHub at your convenience.

About SurveyJS Project

SurveyJS Project includes four open-source JavaScript Libraries:

• Form Library — A free and open-source MIT-licensed JavaScript library that lets you design dynamic, data-driven, multi-language survey forms and run them in your web application using a variety of front-end technologies. Available for free under the MIT license.
• Survey Creator — A GUI-based no-code survey builder that allows easy drag-and-drop form creation even for non-tech savvy users. Requires a commercial developer license.
• Dashboard — Simplifies survey data analysis with interactive and customizable charts and tables. Visualize your insights with the survey data dashboard and analyze survey results in one view. Requires a commercial developer license.
• PDF Generator — Allows you to save an unlimited number of custom-built survey forms to PDF (both new and filled-in), and generate fillable PDF forms to automate your form workflow and go paperless. Requires a commercial developer license.

To learn more about SurveyJS Project, visit our website: surveyjs.io.