时间戳

首页 > 解决方案 > 将占位符文本添加到 plotly 小部件中的 selectize.js 下拉菜单

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

问题描述

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

其他人询问如何在加载页面后更改 selectize.js 占位符值。发布的解决方案通常要求在一个页面上添加一点 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>文本框上方。但我希望它出现在框中——即作为占位符文本。那可能吗？

标签： javascriptjqueryr-plotlyselectize.js

解决方案

有可能的：

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

推荐阅读