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

【问题标题】：Add placeholder text to selectize.js dropdown menu in plotly widget将占位符文本添加到 plotly 小部件中的 selectize.js 下拉菜单
【发布时间】：2020-08-25 13:45:36
【问题描述】：

我正在使用 plotly 和 R 来创建交互式图表。它们中的每一个都包含一个selective.js 搜索小部件，它结合了一个<input> 文本框和一个下拉菜单。（例如，参见here。）我告诉plotly 添加搜索小部件，方法是将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 页面。文本“输入汽车名称”出现在 <input> 文本框上方。但我希望它出现在 in 框中——即作为占位符文本。这可能吗？

【问题讨论】：

标签： javascript jquery r-plotly selectize.js

【解决方案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');
  }")

【讨论】：