Showing dropdown options in selectizeInput with shinyjs / javascript

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)

That's a good question, and sorry I don't know enough Javascript to answer, but it occurred to me you could achieve something similar using a checkboxGroupInput or radioButtons.

With such a complex output list, maybe it would also be an option to make it a table (e.g. rhandsontable) this will give you a lot more control and you can include checkboxes in the table for selection?

What you are doing sounds impressive though!

I can definitely look into that. The issue is that I do still need to maintain a list up top that shows what has been selected in a way that’s easy for a user to see and edit. Most of our users are familiar with PowerBI so I’m trying to get a filter that functions similarly to how it does in PowerBI. So even some type of UI element that functions like this would be great.

The issue with selectize is when you search and select, you have to retype what you searched, which can get annoying for long search lists, hence the separate search bar above. I’m not sure if there’s anything that accomplishes this, even a setting I could update within selectize?

Thank you!!

I haven't used selectize much, and not the way you are suggesting.

But you could just have a text box for the user to type search terms, and then a (reactively linked) table to display the filtered results. This would make the search terms persistent in the text box.

Hmm... would this allow the user to make multiple searches? For instance, they search one string, make a few selections, clear it, and then search something else and select a few items?

Sure. Tables are editable and can have checkboxes in them too.

Regarding selectize, of course you can store the user's search terms in a reactive variable, and then perhaps reinsert it into the selectize control using the updateSelect command to stop them disappearing?

That is what I’m doing with selectize in a sense already. I don’t want to have to go the table route since it would change the functionality and expected user experience. I’m about 99% there with my current method, I really am just in need of the JavaScript code needed to open the drop down. I really do appreciate the help in troubleshooting some of the different options available though!

Cool. I've found it hard to get help for shiny javascript issues, especially on this forum. You might have been luck on stackoverflow, or on the github for shiny/selectize.

Sounds great! That's really good to know. I wasn't quite sure where to post. I'll try those avenues as well. Thanks again!!

No worries at all. Thanks for the quick response! The issue is that the drop down will have several thousand records, and each record in the drop down is formatted with custom JavaScript and CSS to appear more like a 3 column table. The user will need to be able to search for any string of text from the 3 categories and see the below drop down open and filter accordingly. So I do think I’ll need to use selectizeInput to achieve the desired user experience.

However, if I’m not understanding what you’re suggesting correctly, please let me know. Thanks again!