How do I use input from `selectizeInput` to filter a list of options and then `updateSelectizeInput`?

JJ Fantini 0
Viewed 34

BACKGROUND:

I have a large list of stock symbols, 27,000 rows, that I would like to be choices in a selectizeInput() on a shinyApp. Since the list is large I am using server = T in updateSelectizeInput().

AIM:

I would like the options list to not load/render until a user starts typing a string into selectizeInput(), so that I can return all symbols that start with that letter, to reduce loading all 27,000 rows in the input. I would like input$ticker to be what is observed and then what triggers the filtering code logic. How can i achieve this without using a specific button?

Shown below is

  1. intended output, but with a button to produce the behavior instead of the user being in the text box. This is along the lines of what I would like, but does not automatically start searchign when I type in the box and has bad code smell to me.

  2. current logic, using input$ticker in an observer to trigger selection of df and populate updateSelectize() with new choices, but is failing and the app is evaluating too soon?\

  3. trying to load choices once, using upload button only doesn't work

REPREX:

1.

library(shiny)
tickers <- rep(rownames(mtcars), 850)
ui <- {
    renderUI(
        shiny::fluidRow(
            bs4Dash::box(
                title = shiny::selectizeInput(
                    inputId = "ticker",
                    label = "Ticker:",
                    choices = NULL,
                    selected = "AAPL",
                    options = list(
                        placeholder = "e.g AAPL",
                        create = TRUE,
                        maxOptions = 50L
                    )
                ),
                actionButton(
                    inputId = "update",
                    label = "UPDATE NOW"
                ),
                id = "tickerBox",
                closable = F,
                maximizable = F,
                width = 12,
                height = "250px",
                solidHeader = FALSE,
                collapsible = F
            )
        )
    )
}

server <- function(input, output, session){
    choice <-  reactive(
        tickers[startsWith(tickers$symbol, input$ticker), ]
    )
    
    observeEvent(input$update, {    
        updateSelectizeInput(
            session = session,
            label = "Ticker:",
            inputId ="ticker",
            choices = choice(),
            server = TRUE
        )   
    })
}
shiny::shinyApp(ui = ui, server = server)

# REPREX for selectize, glitches and `input$ticker` observer causes loop gltich?
library(shiny)
tickers <- rep(rownames(mtcars), 850)
ui <- {
    renderUI(
        shiny::fluidRow(
            bs4Dash::box(
                title = shiny::selectizeInput(
                    inputId = "ticker",
                    label = "Ticker:",
                    choices = NULL,
                    selected = "AAPL",
                    options = list(
                        placeholder = "e.g AAPL",
                        create = TRUE,
                        maxOptions = 50L
                    )
                ),
                actionButton(
                    inputId = "update",
                    label = "UPDATE NOW"
                ),
                id = "tickerBox",
                closable = F,
                maximizable = F,
                width = 12,
                height = "250px",
                solidHeader = FALSE,
                collapsible = F
            )
        )
    )
}

server <- function(input, output, session){
    
    
    # updateSelectizeInput(
    #     session = session,
    #     label = "Ticker:",
    #     inputId ="ticker",
    #     choices = tickers,
    #     server = TRUE
    # )
    
    
    observeEvent(input$ticker, {   
        
    choices <- tickers[startsWith(tickers$symbol, input$ticker), ]
        
        updateSelectizeInput(
            session = session,
            label = "Ticker:",
            inputId ="ticker",
            choices = choices,
            server = TRUE
        )   
    })
    
    
}
shiny::shinyApp(ui = ui, server = server)


# REPREX for selectize
library(shiny)
tickers <- rep(rownames(mtcars), 850)
ui <- {
    renderUI(
        shiny::fluidRow(
            bs4Dash::box(
                title = shiny::selectizeInput(
                    inputId = "ticker",
                    label = "Ticker:",
                    choices = NULL,
                    selected = "AAPL",
                    options = list(
                        placeholder = "e.g AAPL",
                        create = TRUE,
                        maxOptions = 50L
                    )
                ),
                actionButton(
                    inputId = "update",
                    label = "UPDATE NOW"
                ),
                id = "tickerBox",
                closable = F,
                maximizable = F,
                width = 12,
                height = "250px",
                solidHeader = FALSE,
                collapsible = F
            )
        )
    )
}

server <- function(input, output, session){
    # One call to try and load ticker df
    observeEvent(input$update, {    
        updateSelectizeInput(
            session = session,
            label = "Ticker:",
            inputId ="ticker",
            choices = ticker,
            server = TRUE
        )   
    })
    
    
}
shiny::shinyApp(ui = ui, server = server)

SEE SIMILAR POSTS: SO POST 1, SO POST 2, SO POST 3

selectize.js observers reactive-programming shiny r
1 Answers

What do you think about something like this?

library(shiny)

tickers <- rep(rownames(mtcars), 850)

ui <- fluidPage(
  tags$head(
    tags$script(
      HTML(
        'document.addEventListener("keydown", function(e) {
          Shiny.setInputValue("key_pressed", e.key);
        })'
      )
      )
    ),
  fluidRow(
    column(2, selectizeInput("select", "Select", choices = "")),
    column(1, actionButton("btn", "Search"))
  )
)

server <- function(input, output, session) {
  observeEvent(input$btn, {
    req(input$key_pressed)
    updateSelectizeInput(session, "select", choices = tickers[startsWith(tickers, input$key_pressed)], server = TRUE)
  })
}

shinyApp(ui, server)

Basically I think it is not possible to just use the words which are putted to the selectInput and we need separate input. I think that selectInput is truthy (isTruthy()) only after some option was chosen (and it can't be "" of course), so we can't use anything which is putted as a word to the selectInput box before some option is actually chosen. I'm not sure, but if I'm right, it is necessary to have separate input for what you want.

However, if we could assume that:

  • User will use only one letter to get the options to choose

Then we can use "keydown" event (keydown). Now the user doesn't need to put anything to the selectInput box, she/he can just use a key in the keyboards, like C (letter size does matter here, because we are using startsWith()) and then push "Search" button (but of course this letter can still be put to the selectInput box to mimic what you tried to achieve). We could even imagine solution without the button, but I'm afraid in most use-cases it will be not recommended, I mean if user can interact with the app using keyboard not only to choose the options, but also for other purposes, then we would recompute new options everytime user uses key in the keyboard for - well - nothing.

gss0
Related