如何在shinyalert的HTML内容中使用tag-list box标签列表框

问题原因 #

• 核心错误是参数使用错误：当html = TRUE开启时，自定义HTML内容需要传给html参数，而非text参数。text参数仅用于传递纯文本内容，你把HTML对象传给text会被底层逻辑做二次转义，导致datalist标签失效。
• 次要问题：你写的input标签未添加占位提示，即使渲染成功也不容易感知到下拉效果。

修复后可运行代码 #

library(shiny)
library(shinyalert)

ui <- fluidPage(
  useShinyalert(),
  actionButton("show_alert", "点击弹出弹窗")
)

server <- function(input, output, session) {
  observeEvent(input$show_alert, {
    shinyalert(
      type = "info",
      confirmButtonText = "close",
      confirmButtonCol = "#6DBADE",
      size = "l", 
      closeOnEsc = TRUE,
      closeOnClickOutside = TRUE,
      animation = TRUE,
      html = TRUE,
      # 此处将HTML内容传给html参数而非text参数
      html = HTML("
             <form action=''>
             <input list='cars' placeholder='请输入或选择车型'>
             <datalist id='cars'>
             <option value='BMW' />
             <option value='Bentley' />
             </datalist>
             </form>") 
    )
  })
}

shinyApp(ui, server)

额外注意事项 #

• 如果运行后依然无法下拉，可检查shinyalert版本是否为最新版，执行install.packages("shinyalert")更新即可。
• 不要在弹窗HTML内使用和页面已有元素重复的id属性，避免DOM冲突导致datalist无法绑定到输入框。

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