如何重写Selectize输入框的onChange触发逻辑，实现空选不触发且失焦恢复值？

一、仅在单个元素选中时触发Change事件 #

Shiny的Selectize输入基于Selectize.js封装实现，我们可以直接操作Selectize实例的事件钩子，拦截默认的change事件逻辑，仅当选中单个元素时才触发Shiny的输入值更新：

ui <- fluidPage(
  selectizeInput("my_select", "选择项", choices = c("选项A", "选项B", "选项C"), multiple = FALSE),
  tags$script(HTML('
    // 监听Shiny输入初始化事件，确保Selectize实例已创建
    $(document).on("shiny:inputinitialized", "#my_select", function(event) {
      const selectize = event.target.selectize;
      // 保存原始的change处理函数
      const originalChange = selectize.onChange;
      
      // 重写change事件逻辑
      selectize.onChange = function(value) {
        // 判断选中状态：单选时value不为空，多选时数组长度为1
        const isValidSelection = Array.isArray(value) ? value.length === 1 : value !== null;
        if (isValidSelection) {
          // 仅符合条件时调用原始逻辑，触发Shiny的input更新
          originalChange.call(this, value);
        }
        // 空选时直接返回，不触发任何更新
      };
    });
  '))
)

二、失去焦点时恢复之前的选中值 #

通过为Selectize实例添加状态变量，跟踪有效选中值和临时空选状态，在输入框失去焦点时自动恢复：

ui <- fluidPage(
  selectizeInput("my_select", "选择项", choices = c("选项A", "选项B", "选项C"), multiple = FALSE),
  tags$script(HTML('
    $(document).on("shiny:inputinitialized", "#my_select", function(event) {
      const selectize = event.target.selectize;
      // 初始化保存上次有效选中值
      selectize.lastValidValue = selectize.getValue();
      let tempEmpty = false;
      
      // 监听项删除事件，标记临时空选状态
      selectize.on("item_remove", () => {
        tempEmpty = true;
      });
      
      // 监听输入框失去焦点事件
      selectize.$input.on("blur", () => {
        const currentValue = selectize.getValue();
        const isEmpty = Array.isArray(currentValue) ? currentValue.length === 0 : currentValue === null;
        if (tempEmpty && isEmpty) {
          // 恢复上次有效选中值
          selectize.setValue(selectize.lastValidValue);
          tempEmpty = false;
        }
      });
      
      // 监听有效选中事件，更新上次有效值
      selectize.on("change", (value) => {
        const isValidSelection = Array.isArray(value) ? value.length === 1 : value !== null;
        if (isValidSelection) {
          selectize.lastValidValue = value;
          tempEmpty = false;
        }
      });
    });
  '))
)

组合实现 #

将上述两部分逻辑合并，即可同时满足两个需求：

ui <- fluidPage(
  selectizeInput("my_select", "选择项", choices = c("选项A", "选项B", "选项C"), multiple = FALSE),
  tags$script(HTML('
    $(document).on("shiny:inputinitialized", "#my_select", function(event) {
      const selectize = event.target.selectize;
      const originalChange = selectize.onChange;
      selectize.lastValidValue = selectize.getValue();
      let tempEmpty = false;
      
      // 重写change事件，仅单个选中时触发Shiny更新
      selectize.onChange = function(value) {
        const isValidSelection = Array.isArray(value) ? value.length === 1 : value !== null;
        if (isValidSelection) {
          originalChange.call(this, value);
          selectize.lastValidValue = value;
          tempEmpty = false;
        }
      };
      
      // 标记删除后的临时空选状态
      selectize.on("item_remove", () => {
        tempEmpty = true;
      });
      
      // 失去焦点时恢复选中值
      selectize.$input.on("blur", () => {
        const currentValue = selectize.getValue();
        const isEmpty = Array.isArray(currentValue) ? currentValue.length === 0 : currentValue === null;
        if (tempEmpty && isEmpty) {
          selectize.setValue(selectize.lastValidValue);
          tempEmpty = false;
        }
      });
    });
  '))
)

server <- function(input, output) {
  observeEvent(input$my_select, {
    print(paste("选中项：", input$my_select))
  })
}

shinyApp(ui, server)

这种方案直接基于Selectize.js的原生API和Shiny的输入生命周期事件实现，无需额外插件，也避免了在Shiny Server端做繁琐的if判断，完全在前端层面控制交互逻辑。

内容的提问来源于stack exchange，提问作者Noskario