Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Add placeholder text to selectize.js dropdown menu

The R version of plotly offers an easy way to implement a selectize.js search widget, which combines an <input> text box with a dropdown menu. (See here for an example.) I tell plotly to add the search widget by passing selectize = TRUE to plotly::highlight(). But I also want to include placeholder text in the <input> field – is this possible?

Others have asked – not with Plotly in mind – how to change the selectize.js placeholder value after a page is loaded. The posted solutions call for adding a little jquery to one’s page, which I’m happy to do. But I cannot get the solutions to work when creating figures with Plotly.

Here is minimal code that demonstrates the problem:

library(plotly)
data(mtcars)
myData <- highlight_key(mtcars, ~rownames(mtcars), group = "Enter name of car")
myFig <- plot_ly(myData, x = ~wt, y = ~mpg) 
myFig <- highlight(myFig, selectize = TRUE)
myFig

This code creates an HTML page with a selective.js dropdown menu. The text “Enter name of car” appears above the <input> text box. But I want it to appear in the box – that is, as placeholder text. Is that possible?

I posted a related question to Stack Overflow four days ago, but there are no responses.

Solution at https://stackoverflow.com/questions/61705633/add-placeholder-text-to-selectize-js-dropdown-menu-in-plotly-widget/61827424.