Is there a way to display HTML inside a selectInput in an R shiny app [duplicate]

Question

Is there a way to display HTML tags such as Cu<sup>2+</sup> displaying as "Cu²⁺" inside a selectInput option in an R shiny app ? I would like to display chemical formulae for instance:

library(shiny)

ui <- fluidPage(
  withMathJax(),
  selectInput(
    inputId = "id",
    label = "Choice",
    choices = c('H<sub>2</sub> O', 'CO<sub>2 </sub>','NH<sub>4 </sub><sup>+<\sup>')
  )
)

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

}

shinyApp(ui, server)

I have already tried MathJax which works but considerably slows down the application and KaTeX which is faster but only works in a browser. I think HTML would be the most efficient way.

Answer 1

As shown in this article we can use updateSelectizeInput to use custom HTML for the choices parameter:

library(shiny)

ui <- fluidPage(withMathJax(),
                selectizeInput(
                  inputId = "id",
                  label = "Choice",
                  choices = NULL
                ))

server <- function(input, output, session) {
  updateSelectizeInput(
    session,
    inputId = "id",
    choices = c(
      h2o = "H<sub>2</sub>O",
      co2 = "CO<sub>2 </sub>",
      NH4Plus = "NH<sub>4</sub><sup>+</sup>"
    ),
    options = list(
      render = I(
        '{
        item: function(item, escape) {
          return "<div>" + item.value + "</div>";
          },
        option: function(item, escape) {
          return "<div>" + item.value + "</div>";
          }
        }')
    ),
    server = FALSE
  )
}

shinyApp(ui, server)