使用JS增加Shiny DT表中搜索框的大小

Question

繼這篇文章之后。 在下面的示例中，如何在 JS 調用中增加搜索框的大小？

我想將搜索框的大小增加到當前長度的 4 倍？ 是否有可能實現這種場景？

library(shiny)
library(DT)

callback <- '
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("id", "mySearch");
x.setAttribute("placeholder", "Search");
x.style.float = "right";
$("div.search").append($(x));
$("#mySearch").on("keyup redraw", function(){
  var splits = $("#mySearch").val().split(" ").filter(function(x){return x !=="";})
  var searchString = "(" + splits.join("|") + ")";
  table.search(searchString, true).draw(true);
});
'

ui <- fluidPage(
  DTOutput("dtable")
)

server <- function(input, output){

  output[["dtable"]] <- renderDT({
    datatable(
      iris[c(1,2,51,52,101,102),],
      options = list(
        dom = "l<'search'>rtip"
      ),
      callback = JS(callback)
    )
  }, server = FALSE)

}

shinyApp(ui, server)

Session 信息：

R version 3.6.3 (2020-02-29)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats4    parallel  stats     graphics  grDevices utils     datasets  methods  
[9] base     

other attached packages:
 [1] ggplot2_3.3.0        DT_0.13              rsconnect_0.8.16     shinythemes_1.1.2   
 [5] dplyr_0.8.5          shiny_1.4.0.2        BiocParallel_1.20.1  MLInterfaces_1.66.5 
 [9] cluster_2.1.0        annotate_1.64.0      XML_3.99-0.3         AnnotationDbi_1.48.0
[13] IRanges_2.20.2       MSnbase_2.12.0       ProtGenerics_1.18.0  S4Vectors_0.24.4    
[17] mzR_2.20.0           Rcpp_1.0.4.6         Biobase_2.46.0       BiocGenerics_0.32.0 

Answer 1

感謝您的意見。

確實x.style.width = "50%"; 在callback中（在x.style.float之后）有效。