Control/delay the search speed of Shiny DT datatable using JS/html

Question

I have an app with a very large Shiny DT table and I have managed to implement batch searching of the datatable (with help from this example ) using JS/html. As I understand the table is searched in real time, for example, if I would like to find items in the table that start with "Ver", once I start typing the search starts after I type the very first letter, so I have to slowly wait whilst items beginning with "V" first appear, then wait for all items that have "Ve", then finally "Ver". This is not a problem for the short example below, but is a problem on some users OS' and with very large tables with many entries.

To summarise, I don't want to search every time a user presses key, I want to search when user stopped typing for x seconds. I think this is called debouncing according to this post ?

Can someone please tell me if this is possible? Or suggest an alternative solution to my problem please?

I have included a reproducible example below, modified from my current app that works very well (apart from the slow search and update of the table).

library(shiny)
library(DT)

callback <- '
$("div.search").append($("#mySearch"));
$("#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(
  tags$head(tags$style(HTML(".search {float: right;}"))),
  br(),
  tags$input(type = "text", id = "mySearch", placeholder = "Search"),
  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)

> sessionInfo()
R version 4.0.0 (2020-04-24)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.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/4.0/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] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] DT_0.13       shiny_1.4.0.2

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.4.6      digest_0.6.25     later_1.1.0.1     mime_0.9         
 [5] R6_2.4.1          jsonlite_1.6.1    xtable_1.8-4      magrittr_1.5     
 [9] evaluate_0.14     rlang_0.4.6       promises_1.1.0    rmarkdown_2.2    
[13] tools_4.0.0       htmlwidgets_1.5.1 crosstalk_1.1.0.1 rsconnect_0.8.16 
[17] fastmap_1.0.1     httpuv_1.5.4      xfun_0.14         yaml_2.2.1       
[21] compiler_4.0.0    htmltools_0.4.0   knitr_1.28  

Answer 1

You can use setTimeout to delay the searching. Here 1 second (1000 ms):

callback <- '
$("div.search").append($("#mySearch"));
$("#mySearch").on("keyup redraw", function(){
  var splits = $("#mySearch").val().split(" ").filter(function(x){return x !=="";})
  var searchString = "(" + splits.join("|") + ")";
  setTimeout(function(){
    table.search(searchString, true).draw(true);
  }, 1000);
});
'