将占位符文本添加到 plotly 小部件中的 selectize.js 下拉菜单

Question

我正在使用 plotly 和 R 来创建交互式图表。它们每个都包含一个 selective.js 搜索小部件，它结合了一个 <input> 文本框和一个下拉菜单。（有关示例，请参见 here。）我通过将 selectize = TRUE 传递给 plotly::highlight() 来巧妙地告诉添加搜索小部件。我想在 <input> 字段中包含占位符文本 - 这可能吗？

其他人询问如何在加载页面后change the selectize.js placeholder value。发布的解决方案通常要求在页面上添加一点 jquery，我很乐意这样做。但是我无法使解决方案起作用。出现问题的原因可能是我无法控制 selectize.js 或下拉菜单的任何其他方面如何合并到 HTML 文档中。（将那部分绘制成黑盒。）

这是演示问题的最小 R 代码：

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

此代码创建一个带有 selective.js 下拉菜单的 HTML 页面。文本 "Enter name of car" 出现在 <input> 文本框上方。但我希望它显示在 in 框中——也就是说，作为占位符文本。这可能吗？

Answer 1

有可能：

library(plotly)
data(mtcars)
myData <- highlight_key(mtcars, ~rownames(mtcars))
myFig <- plot_ly(myData, x = ~wt, y = ~mpg) 
myFig <- highlight(myFig, selectize = TRUE)
onRender(
  myFig,
  "function (el) {

    // Get selectized search widget
    s = $('select')[0].selectize;

    // Update placeholder 
    s.settings.placeholder = 'Enter name of car'; 
    s.updatePlaceholder();

    // Hide group name (random string) that would appear above placeholder
    $('#htmlwidget_container').find('label').css('display', 'none');
  }")

将占位符文本添加到 plotly 小部件中的 selectize.js 下拉菜单

Add placeholder text to selectize.js dropdown menu in plotly widget

javascript

jquery

selectize.js

r-plotly