如何使用列表框获取输入值？

Question

我想在闪亮的应用程序中使用双面多选框（也称为列表框）。我发现了一个看起来很有希望的 jQuery 多选库：https://crlcu.github.io/multiselect/#。我用这个库做了一个闪亮的应用程序。

它似乎运行良好，但仅当在右侧框中选择项目时才会显示输入。理想情况下，我希望项目在输入到右侧框中后立即被选中。

jquery 依赖可以在这里找到：https://raw.githubusercontent.com/crlcu/multiselect/master/dist/js/multiselect.js

library(shiny)

# function for make UI HTML
MultiselectHTML <- function(mylist, myname) {
    paste_sum <- ""
    for (i in 1:length(mylist)) {
        paste_sum <- paste0(paste_sum, "<option value=", i, ">", mylist[i], "</option>")
    }
    
    # make tag list
    tagList(div(class = "item_search",
                div(
                    class = "row",
                    div(
                        class = "col-xs-5",
                        tags$select(
                            name = "from[]",
                            id = myname,
                            class = "form-control",
                            multiple = "multiple",
                            size = "8",
                            HTML(paste_sum)
                        )
                    ),
                    div(
                        class = "col-xs-2",
                        tags$button(
                            type = "button",
                            class = "btn btn-primary btn-block",
                            id = paste0(myname, "_undo"),
                            "undo"
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_rightAll"),
                            tags$i(class = "glyphicon glyphicon-forward")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_rightSelected"),
                            tags$i(class = "glyphicon glyphicon-chevron-right")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_leftSelected"),
                            tags$i(class = "glyphicon glyphicon-chevron-left")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-block",
                            id = paste0(myname, "_leftAll"),
                            tags$i(class = "glyphicon glyphicon-backward")
                        ),
                        tags$button(
                            type = "button",
                            class = "btn btn-warning btn-block",
                            id = paste0(myname, "_redo"),
                            "redo"
                        )
                    ),
                    div(
                        class = "col-xs-5"
                        ,
                        tags$select(
                            name = "to[]",
                            id = paste0(myname, "_to"),
                            class = "form-control" ,
                            size = "8",
                            multiple = "multiple"
                        )
                    )
                )), 
            br())
}

ui <- fluidPage(
    tags$head(includeScript("www/multiselect.js")),
    tags$script(
        HTML(
            'jQuery(document).ready(function($) {
               $("#multiselect1").multiselect({
                 search: {
                 left: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 right: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 },
                 fireSearch: function(value) {
                   return value.length >= 1;
                 }
               });
             });
             '
        )
    ),
    MultiselectHTML(c("a", "b", "c", "d", "e"), "multiselect1"),
    uiOutput("mselect")
)

server <- function(input, output, session) {
    output$mselect <- renderUI({
        HTML(paste(
            "multiselect1:",
            paste(input$multiselect1, collapse = ", "),
            "<br>multiselect1_to:",
            paste(input$multiselect1_to, collapse = ", "),
            "<br>q:",
            paste(input$q, collapse = ", ")
        ))
    })
}

shinyApp(ui = ui, server = server)

Answer 1

对于默认选择左侧选项，只需在创建 <option> 时添加 selected 属性即可，即

for (i in 1:length(mylist)) {
    paste_sum <- paste0(paste_sum, "<option selected value=", i, ">", mylist[i], "</option>")
}

对于移动后的默认选择正确选项，您可以使用 jquery 编辑将selected 属性附加到移动的选项：

$("select option").each(function(){
        $(this).attr("selected","selected");
});

您的回调需要有一个新的移动到正确的功能。类似于（取自文档here）：

tags$script(
    HTML(
        'jQuery(document).ready(function($) {
               $("#multiselect1").multiselect({
                 search: {
                 left: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 right: \'<input type="text" name="q" class="form-control" placeholder="Search..." />\',
                 },
                 fireSearch: function(value) {
                   return value.length >= 1;
                 },
                 moveToRight: function(Multiselect, $options, event, silent, skipStack) {
                    var button = $(event.currentTarget).attr("id");
                    if (button == "multiselect1_rightSelected") {
                        var $left_options = Multiselect.$left.find("> option:selected");
                        Multiselect.$right.eq(0).append($left_options);
                        $("select option").each(function(){$(this).attr("selected","selected");})
                    if ( typeof Multiselect.callbacks.sort == "function" && !silent ) {
                        Multiselect.$right.eq(0).find("> option").sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
                        $("select option").each(function(){$(this).attr("selected","selected");})
                    }
                    } else if (button == "multiselect1_rightAll") {
                        var $left_options = Multiselect.$left.children(":visible");
                        Multiselect.$right.eq(0).append($left_options);
 
                        if ( typeof Multiselect.callbacks.sort == "function" && !silent ) {
                            Multiselect.$right.eq(0).find("> option").sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
                            $("select option").each(function(){$(this).attr("selected","selected");})
                            }
                    }
                    }
                })
             });
             '
    )
)