Virtual Select Input

A select dropdown widget made for performance, based on virtual-select JavaScript library.

Usage

virtualSelectInput(
  inputId,
  label,
  choices,
  selected = NULL,
  multiple = FALSE,
  search = FALSE,
  hideClearButton = !multiple,
  autoSelectFirstOption = !multiple,
  showSelectedOptionsFirst = FALSE,
  showValueAsTags = FALSE,
  optionsCount = 10,
  noOfDisplayValues = 50,
  allowNewOption = FALSE,
  disableSelectAll = !multiple,
  disableOptionGroupCheckbox = !multiple,
  disabled = FALSE,
  ...,
  stateInput = TRUE,
  updateOn = c("change", "close"),
  html = FALSE,
  inline = FALSE,
  width = NULL
)

Arguments

inputId

The input slot that will be used to access the value.

label

Display label for the control, or NULL for no label.

choices

List of values to select from. You can use:

• vector use a simple vector for better performance.

• named list / named vector in the same way as with shiny::selectInput()

• custom formatted list allowing to use more options, must correspond to virtual-select specifications

• output of prepare_choices()

selected

The initially selected value (or multiple values if multiple = TRUE). If not specified then defaults to the first value for single-select lists and no values for multiple select lists.

multiple

Is selection of multiple items allowed?

search

Enable search feature.

hideClearButton

Hide clear value button.

autoSelectFirstOption

Select first option by default on load.

showSelectedOptionsFirst

Show selected options at the top of the dropbox.

showValueAsTags

Show each selected values as tags with remove icon.

optionsCount

No.of options to show on viewport.

noOfDisplayValues

Maximum no.of values to show in the tooltip for multi-select.

allowNewOption

Allow to add new option by searching.

disableSelectAll

Disable select all feature of multiple select.

disableOptionGroupCheckbox

Disable option group title checkbox.

disabled

Disable entire dropdown.

...

Other arguments passed to JavaScript method, see virtual-select documentation for a full list of options.

stateInput

Activate or deactivate the special input value input$<inputId>_open to know if the menu is opened or not, see details.

updateOn

When to update the input value server-side : on each changes or when the menu is closed.

html

Allow usage of HTML in choices.

inline

Display inline with label or not.

width

The width of the input, e.g. '400px', or '100%'; see validateCssUnit().

Value

A shiny.tag object that can be used in a UI definition.

Note

State of the menu (open or close) is accessible server-side through the input value: input$<inputId>_open, which can be TRUE (opened) or FALSE (closed) or NULL (when initialized).

For arguments that accept a function (onServerSearch, labelRenderer), only a string with a function name is accepted. The function must be defined outside of any $(document).ready({...}) javascript block. For examples, see the documentation for onServerSearch and labelRenderer.

See also

• demoVirtualSelect() for demo apps

• updateVirtualSelect() for updating from server

Examples

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$h2("Virtual Select"),

  fluidRow(
    column(
      width = 4,
      virtualSelectInput(
        inputId = "single",
        label = "Single select :",
        choices = month.name,
        search = TRUE
      ),
      virtualSelectInput(
        inputId = "multiple",
        label = "Multiple select:",
        choices = setNames(month.abb, month.name),
        multiple = TRUE
      ),
      virtualSelectInput(
        inputId = "onclose",
        label = "Update value on close:",
        choices = setNames(month.abb, month.name),
        multiple = TRUE,
        updateOn = "close"
      )
    ),
    column(
      width = 4,
      tags$b("Single select :"),
      verbatimTextOutput("res_single"),
      tags$b("Is virtual select open ?"),
      verbatimTextOutput(outputId = "res_single_open"),

      tags$br(),

      tags$b("Multiple select :"),
      verbatimTextOutput("res_multiple"),
      tags$b("Is virtual select open ?"),
      verbatimTextOutput(outputId = "res_multiple_open"),

      tags$br(),

      tags$b("Update on close :"),
      verbatimTextOutput("res_onclose"),
      tags$b("Is virtual select open ?"),
      verbatimTextOutput(outputId = "res_onclose_open")
    )
  )


)

server <- function(input, output, session) {

  output$res_single <- renderPrint(input$single)
  output$res_single_open <- renderPrint(input$single_open)

  output$res_multiple <- renderPrint(input$multiple)
  output$res_multiple_open <- renderPrint(input$multiple_open)

  output$res_onclose <- renderPrint(input$onclose)
  output$res_onclose_open <- renderPrint(input$onclose_open)

}

if (interactive())
  shinyApp(ui, server)
# labelRenderer example ----

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$script(HTML("
      function colorText(data) {
        let text = `<span style='color: ${data.label};'>${data.label}</span>`;
        return text;
      }"
    )),
  ),
  tags$h1("Custom LabelRenderer"),
  br(),
  fluidRow(
    column(
      width = 6,
      virtualSelectInput(
        inputId = "search",
        label = "Color picker",
        choices = c("red", "blue", "green", "#cbf752"),
        width = "100%",
        keepAlwaysOpen = TRUE,
        labelRenderer = "colorText",
        allowNewOption = TRUE
      )
    )
  )

)

server <- function(input, output, session) {}

if (interactive())
  shinyApp(ui, server)

# onServerSearch example ----

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$script(HTML(r"(
      // Main function that is called
      function searchLabel(searchValue, virtualSelect) {
        // Words to search for - split by a space
        const searchWords = searchValue.split(/[\s]/);

        // Update visibility
        const found = virtualSelect.options.map(opt => {
          opt.isVisible = searchWords.every(word => opt.label.includes(word));
          return opt;
        });

        virtualSelect.setServerOptions(found);
        }
      )"
    )),
  ),
  tags$h1("Custom onServerSearch"),
  br(),
  fluidRow(
    column(
      width = 6,
      virtualSelectInput(
        inputId = "search",
        label = "Better search",
        choices = c("This is some random long text",
                    "This text is long and looks differently",
                    "Writing this text is a pure love",
                    "I love writing!"
        ),
        width = "100%",
        keepAlwaysOpen = TRUE,
        search = TRUE,
        autoSelectFirstOption = FALSE,
        onServerSearch = "searchLabel"
      )
    )
  )

)

server <- function(input, output, session) {}

if (interactive())
  shinyApp(ui, server)