Vega Search Select Component

The Search Select component is a Primary Fields component that lets end-users search for, or select, one or more options from a drop-down list. Unlike the Simple Select component, end-users can enter a value into the field and the drop-down list filters options to match that value. End-users then use the arrow keys or their mouse to select an option from the filtered list.

By default, the Search Select component remains collapsed until the end-user clicks it. After making a selection, the list closes again.

You'll find the Search Select component in the Primary Fields group to the left of the Module Builder.

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Field Text

A static image displaying the Search Select component's Display settings.

Setting

Description

Label Text

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Placeholder Text

A short prompt telling end-users the expected value of an input field. For example: Enter your Social Security Number. Placeholder Text displays inside the input field until the end-user begins an entry.

Formatting

Setting

Description

Allow Multiple Selections

When set to  (ON), end-users can select multiple options from the drop-down. Each time the end-user clicks an option, its added to the field.

Render Select Menu as Portal

When set to  (ON), in Express View, the search select field is rendered in the HTML body of the DOM. When set to (OFF), the Search Select field nests in its parent container.

By default this setting is  (ON).

You'll configure a Search Select component to collect an end-user's cat type preference. You'll configure eight options for end-users to select.

These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a Search Select component onto the canvas.
2. In the Property ID field, enter catType.
3. In the Label Text field, enter What is your favorite cat breed?.
4. Navigate to the component's Data settings.
5. In the Values  table, enter the following:
 

Label

Value

1

Bengal

bengal

2

Sphynx

sphynx

3

Tabby

tabby

4

Maine Coon

maineCoon

5

Rag Doll

ragDoll

6

British Shorthair

britishShorthair

7

American Shorthair

americanShorthair

8

Exotic Shorthair

exoticShorthair

A static image displaying the catType Search Select component's data settings. The Data Values data is filled out.

6. Click Save Component.
7. Save your module.

Your Search Select component looks like the following in Express View:

Using the above example, execute the Vega Console command UNQENG.tools.getComponentState('catType') in the DevTools Console to display the component's data structure.

Here's how the above example looks after selecting an option in Express View:

A static image displaying a Search Select component with a single-selection.