Reputation: 190

Select multiple items for search keyword by pressing Enter in R Shiny input

I am trying to select items in Shiny's select input by using entered search keyword and pressing Enter to select all matching items for keyword.

The observe function in the snippet works if I provide an item like ALL that is already present in the list but I want it to work for any typed keyword. e.g. App and hit Enter to select all matching items.

It will be interesting to see if there are other custom options that can be coded using jquery or something else to capture the typed input and capture filtered items. Or may be some regex instead of the "ALL" that I used in the if condition.

    ---
    title: "search and select multiple items by pressing Enter"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    runtime: shiny
    ---

    ```{r setup, include=FALSE}
    library(flexdashboard)
    ```

    Column {.sidebar data-width=300}
    -----------------------------------------------------------------------

    ```{r}
    #####################
    ### Reactive Parameters 

    Parameters <- reactive({
      c("ALL","Apple","App","Application","Approximate","Appointment","Ap_titude","Apricot","B","Ball","Bat","Battery")
    })

    output$params = renderUI({
      selectInput(
        'params',
        'Parameters',
        choices = Parameters(),
        multiple = TRUE,
        selectize = TRUE
      )
    })

    observe({
      if("ALL" %in% input$params){
        param_selection <- setdiff(Parameters(), "ALL")
      } else {
        param_selection <- input$params
      }
      updateSelectInput(session, "params", selected = as.character(unlist(param_selection)))
    })


    uiOutput("params")

    ```

    Column
    -----------------------------------------------------------------------

    ### Summary

    ```{r}

    ```

Upvotes: 2

Answers (2)

saken

Reputation: 21

Here is Tarun Parmar's code after debugging and it works (as rmarkdown/.Rmd file )

---
title: "search and select multiple items by pressing Enter"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---
    
```{r setup, include=FALSE}
library(flexdashboard)
library(dplyr)
```
    
Column {.sidebar data-width=300}
------------------------------------------------------------------
    
```{r echo=FALSE}
#####################
### Reactive Parameters 
    
Parameters <- reactive({
  c("ALL","Apple","App","Application","Approximate","Appointment","Atitude","Apricot","B","    Ball","Bat","Battery")
})
    
output$params = renderUI({
  selectizeInput(
    'params',
    'Parameters',
    selected = NULL,
    choices = Parameters(),
    multiple = TRUE,
    options = list(
      delimiter= ',',
      persist= FALSE,
      create = I("function(input, callback) {
        callback({
            'value': input,
            'text': input
        });
    }")
    )    
  )
})
    
observe({
  dt <- as.character(unlist(Parameters()))
  if(is.null(input$params)){
    return()
  } else{
    if("ALL" %in% input$params){
      param_selection <- setdiff(dt, "ALL")
    } else {
      param_selection <- dt[grep(paste(input$params, collapse = "|"), dt)]
    }
  }
  updateSelectInput(session, "params", selected = as.character(unlist(param_selection)))
})
    
    
uiOutput("params")
    
```
    
Column
------------------------------------------------------------------
    
### Summary
    
```{r}
    
```

Upvotes: 0

Tarun Parmar

Reputation: 190

I found help for selectize.js . It was hyperlinked on selectize page of Shiny.

I ended up using the create function to get it to work. Had to use callback instead of return. The selection based on search string was showing undefined, I could not get it to show correct selection. But since I had the observe function through which I was going to updateSelectInput, I did not worry about that.

Here's a sample code that I put together.

    ---
    title: "search and select multiple items by pressing Enter"
    output: 
      flexdashboard::flex_dashboard:
        orientation: columns
        vertical_layout: fill
    runtime: shiny
    ---

    ```{r setup, include=FALSE}
    library(flexdashboard)
    library(dplyr)
    ```

    Column {.sidebar data-width=300}
    -----------------------------------------------------------------------

    ```{r echo=FALSE}
    #####################
    ### Reactive Parameters 

    Parameters <- reactive({
      c("ALL","Apple","App","Application","Approximate","Appointment","Ap_titude","Apricot","B","Ball","Bat","Battery")
    })

    output$params = renderUI({
      selectizeInput(
        'params',
        'Parameters',
        selected = NULL,
        choices = Parameters(),
        multiple = TRUE,
        options = list(
        delimiter= ',',
        persist= FALSE,
        create = I("function(input, callback) {
            callback({
                'value': input,
                'text': input
            });
        }")
        )    
      )
    })

    observe({
      dt <- as.character(unlist(Parameters()))
      if(is.null(input$params)){
        return()
      } else{
          if("ALL" %in% input$params){
            param_selection <- setdiff(dt, "ALL")
          } else {
            param_selection <- dt[grep(paste(input$params, collapse = "|"), dt)]
          }
      }
      updateSelectInput(session, "params", selected = as.character(unlist(param_selection)))
    })


    uiOutput("params")

    ```

    Column
    -----------------------------------------------------------------------

    ### Summary

    ```{r}

    ```

And this is the output:

Search string- "App", add it

The moment you click, "Add App", observe function triggers and updates the selection to all the values that match the keyword.

Hope this helps someone else that faces the same issue like I did.

Upvotes: 2

Select multiple items for search keyword by pressing Enter in R Shiny input

Answers (2)

Related Questions