在 plotly widget 中为 selectize.js 下拉菜单添加占位符文本。

Question

我正在使用 plotly 与 R 来创建交互式图表。每一个图表都包含一个selective.js搜索部件，它结合了一个 <input> 带有下拉菜单的文本框。(参见 此处 为例）。) 我告诉 plotly 添加搜索小部件，通过传给 selectize = TRUE 到 plotly::highlight(). 我想在 <input> 领域 -- -- 这可能吗？

还有人问如何 改变selectize.js的占位符值。 在页面加载后。发布的解决方案一般都是要求在自己的页面上添加一点jquery，我很乐意这样做。但我无法让这些解决方案奏效。问题的出现可能是因为我无法控制selectize.js或下拉菜单的任何其他方面如何融入到HTML文档中。(Plotly将这部分内容进行了黑盒处理)。

下面是演示这个问题的最小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页面。文本 "输入汽车名称 "出现在下面的 <input> 文本框。但我想让它显示为 在 即作为占位文字。这可能吗？

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');
  }")