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

Question

我正在使用 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

此代碼創建一個 HTML 頁面，其中包含一個selective.js 下拉菜單。 文本“輸入汽車名稱”出現在<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');
  }")