Fix for onServerSearch and labelRenderer (#666)

* Fixed onServerSearch bug

* Removed console.log, used packer

* Fixed labelRenderer

* Reverted version to  0.8.1.9100

* Added examples

* Fixed T shortcut

* Documented change of T -> TRUE

NEWS.md

@@ -1,3 +1,8 @@
+shinyWidgets 0.8.2
+======================
+
+* Fixed a bug where `virtualSelectInput()` did not register the `onServerSearch` or `labelRenderer` parameters.
+
 shinyWidgets 0.8.1
 ======================
 

R/virtual-select.R

@@ -101,6 +101,11 @@ prepare_choices <- function(.data,
 #' @note State of the menu (open or close) is accessible server-side through the input value:
 #'  `input$<inputId>_open`, which can be `TRUE` (opened) or `FALSE` (closed) or `NULL` (when initialized).
 #'
+#' @note For arguments that accept a function (`onServerSearch`, `labelRenderer`), only a string with a function name
+#' is accepted. The function must be defined outside of any `$(document).ready({...})` javascript block. For examples, see the
+#' documentation for [onServerSearch](https://sa-si-dev.github.io/virtual-select/#/examples?id=server-search)
+#' and [labelRenderer](https://sa-si-dev.github.io/virtual-select/#/examples?id=add-imageicon).
+#'
 #' @seealso
 #'  * [demoVirtualSelect()] for demo apps
 #'  * [updateVirtualSelect()] for updating from server
@@ -112,6 +117,7 @@ prepare_choices <- function(.data,
 #' @importFrom jsonlite toJSON
 #'
 #' @example inst/examples/virtual-select/default/app.R
+#' @example examples/virtual-select-funcs.R
 virtualSelectInput <- function(inputId,
                                label,
                                choices,

examples/virtual-select-funcs.R

@@ -0,0 +1,90 @@
+# labelRenderer example ----
+
+library(shiny)
+library(shinyWidgets)
+
+ui <- fluidPage(
+  tags$head(
+    tags$script(HTML("
+      function colorText(data) {
+        let text = `<span style='color: ${data.label};'>${data.label}</span>`;
+        return text;
+      }"
+    )),
+  ),
+  tags$h1("Custom LabelRenderer"),
+  br(),
+  fluidRow(
+    column(
+      width = 6,
+      virtualSelectInput(
+        inputId = "search",
+        label = "Color picker",
+        choices = c("red", "blue", "green", "#cbf752"),
+        width = "100%",
+        keepAlwaysOpen = TRUE,
+        labelRenderer = "colorText",
+        allowNewOption = TRUE
+      )
+    )
+  )
+
+)
+
+server <- function(input, output, session) {}
+
+if (interactive())
+  shinyApp(ui, server)
+
+# onServerSearch example ----
+
+library(shiny)
+library(shinyWidgets)
+
+ui <- fluidPage(
+  tags$head(
+    tags$script(HTML(r"(
+      // Main function that is called
+      function searchLabel(searchValue, virtualSelect) {
+        // Words to search for - split by a space
+        const searchWords = searchValue.split(/[\s]/);
+
+        // Update visibility
+        const found = virtualSelect.options.map(opt => {
+          opt.isVisible = searchWords.every(word => opt.label.includes(word));
+          return opt;
+        });
+
+        virtualSelect.setServerOptions(found);
+        }
+      )"
+    )),
+  ),
+  tags$h1("Custom onServerSearch"),
+  br(),
+  fluidRow(
+    column(
+      width = 6,
+      virtualSelectInput(
+        inputId = "search",
+        label = "Better search",
+        choices = c("This is some random long text",
+                    "This text is long and looks differently",
+                    "Writing this text is a pure love",
+                    "I love writing!"
+        ),
+        width = "100%",
+        keepAlwaysOpen = TRUE,
+        search = TRUE,
+        autoSelectFirstOption = FALSE,
+        onServerSearch = "searchLabel"
+      )
+    )
+  )
+
+)
+
+server <- function(input, output, session) {}
+
+if (interactive())
+  shinyApp(ui, server)

srcjs/inputs/virtual-select.js

@@ -88,6 +88,12 @@ $.extend(virtualSelectBinding, {
     data = JSON.parse(data.text);
     var config = data.config;
     config.options = makeOptions(data.options);
+    if (config.onServerSearch) {
+      config.onServerSearch = window[config.onServerSearch];
+    }
+    if (config.labelRenderer) {
+      config.labelRenderer = window[config.labelRenderer];
+    }
     config.ele = el;
     VirtualSelect.init(config);
     if (data.stateInput) {