如何让Shiny的pickerInput下拉框初始不展示选项仅搜索时显示匹配结果

要实现仅输入搜索内容时才展示候选选项的需求，只需在原有代码基础上注入少量JS控制下拉展示逻辑即可，修改后的完整可运行代码如下：

library(shiny)
library(shinyWidgets)

my_autocomplete_list <- c("ICICI Prudential aaaa","ICICI Prudential bbbb","ICICI Prudential ccccc", "Tata dddd","eeee")

ui <- fluidPage(
  # 新增JS控制picker展示逻辑
  tags$script(HTML("
  $(document).on('shown.bs.select', '#fundname', function() {
    const searchInput = $(this).next().find('.bs-searchbox input');
    const optionList = $(this).next().find('.dropdown-menu.inner');
    // 展开时如果搜索框为空则隐藏选项
    if (searchInput.val().trim() === '') {
      optionList.hide();
    }
    // 监听搜索输入，动态控制选项显隐
    searchInput.on('input', function() {
      optionList.toggle($(this).val().trim() !== '');
    });
  });
  ")),
  
  sidebarLayout(
    sidebarPanel(
      pickerInput(
        inputId = "fundname",
        label = "Search Fund", 
        choices = my_autocomplete_list,
        options = list(title = "Search Fund",
                       `live-search` = TRUE)
      ),
      
      actionButton("submit", "Submit")
    ),
    
    mainPanel(
    )
  )
)

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

# Run App
shinyApp(ui = ui, server = server)

改动说明 #

• 新增的JS片段基于pickerInput底层依赖的Bootstrap Select事件实现控制：
  • 监听下拉框展开事件，若此时搜索框无内容，直接隐藏候选选项列表
  • 实时监听搜索框输入状态，输入内容非空时展示匹配的候选选项，内容清空时自动隐藏选项
• 不需要修改原有pickerInput的配置参数，也不会影响原有搜索匹配、选择的逻辑
• 如果页面存在多个需要实现同逻辑的pickerInput，只需将JS中选择器#fundname替换为对应组件的ID即可批量适配

内容的提问来源于stack exchange，提问作者Ujjawal Bhandari