Hello,
In my app, I have a search bar, which filters the options in a related selectizeInput. When a user types something into the search bar and clicks the search icon / presses enter, I want the choices in the below dropdown to be shown (similar to if I had clicked on the selectizeInput), so it's clear to the user that their search was processed.
I was able to use this topic to figure out how to reference the dropdown from JavaScript. However, I am struggling to write the JS code needed to expand the dropdown.
I have tried the .click method, and have tried using the selectize API method described here. However, the code provided in the latter example is so minimal that I can't seem to replicate it.
I have pasted a MWE below. I am open to any method that will simulate "clicking and expanding" the below dropdown when a search is entered. This is my first time posting, so I apologize if I have missed anything! Your help is greatly appreciated!
library(shiny)
library(shinyWidgets)
library(shinyjs)
ui <- fluidPage(
useShinyjs(), # Include shinyjs
#the search bar that will hopefully open the below dropdown when the user clicks "enter"
searchInput(
inputId = "search_box", label = "Search", placeholder = "",
btnSearch = icon("search"), btnReset = NULL),
selectizeInput("dropdown","Select from dropdown", multiple = T,
choices = c("dog 1","dog 2","dog 3","cat 1","cat 2","cat 3")),
#accessing the selectize input with javascript
actionButton("access_selectize","Access selectize with js")
)
server <- function(input, output) {
#confirming that element is properly accessed with JS
observeEvent(input$access_selectize,{
runjs('alert($("#dropdown :selected").text())')
})
#this part does not work...
observeEvent(input$search_box, {
runjs('
var $select = $("#dropdown :selected").selectize(options);
$select[0].open();
')
})
}
# Run the application
shinyApp(ui = ui, server = server)