Bootstrap Select 可编辑组合框黑客

Question

如何让我的用户将他们自己的选项添加到 bootstrap-select？

您好。在花了一些时间尝试找到一个适用于 bootstrap 4 样式的简单解决方案之后，包括查看提供的解决方案和等待这个未解决问题的死线程：https://github.com/snapappointments/bootstrap-select/issues/990，我决定自己动手。

以下解决方案依赖于在 bootstrap-select 元素上启用实时搜索选项。它使用实时搜索字段将用户键入的自定义值添加到选项列表中。这是一个 hacky 解决方案而不是最漂亮的东西，但也许这个概念可以直接集成到 bootstrap select 中以最终解决问题 990。

Answer 1

让用户将自己的值添加到 bootstrap-select 实时搜索功能 select 或

只需将此代码添加到您的页面即可。将 (yourselector) 替换为 selector。对于我的项目，我只想要任何不具备多重能力的 selectpicker 元素，所以我使用了 .selectpicker:not([multiple])。

var newOption;
$(document).ready(function () {
    //Custom editable combobox
    $(document).on("loaded.bs.select", "(yourselector)", function (e, clickedIndex, isSelected, previousValue) {
        newOption = ""; //Reset newOption before doing a new search
        $(e.currentTarget).siblings(".dropdown-menu").on('keyup', '.bs-searchbox input', function (ie) {
            //if more than one and search is 0 characters, continue. If more than one and search is 1 character and character doesn't match first character of newValue, delete newValue.
            //If 1 and class is "no-results", delete old newValue and add newValue.
            console.log("running keyup script for " + e.currentTarget.id);

            var searchList = $(e.currentTarget).siblings("div.dropdown-menu ul.dropdown-menu li");
            var searchPhrase = $(ie.currentTarget).val();

            //Something was found
            if (searchList.length > 0 && !$(searchList[0]).hasClass("no-results")) {
                //new search
                if (searchPhrase.length == 0)
                    return;
                else {
                    //they haven't started searching the same phrase again
                    if (newOption && newOption.toLowerCase().indexOf(searchPhrase.toLowerCase()) < 0) {
                        console.log("newOption: " + newOption + "\nsearchPhrase: " + searchPhrase + "\nSubstring?: " + newOption.toLowerCase().indexOf(searchPhrase.toLowerCase()));
                        //delete newOption from options list and reset
                        $("#" + e.currentTarget.id + " option[value='" + newOption + "']").remove();
                        newOption = "";
                        $(e.currentTarget).selectpicker("refresh");
                        $(ie.currentTarget).trigger('propertychange');
                    }
                }
            }
            //Nothing was found
            else {
                $("#" + e.currentTarget.id + " option[value='" + newOption + "']").remove();
                newOption = searchPhrase;
                $(e.currentTarget).append($('<option>').val(searchPhrase).text(searchPhrase));
                $(e.currentTarget).selectpicker("refresh");
                $(ie.currentTarget).trigger('propertychange');
            }
        })
    });
    $(".selectpicker").on("changed.bs.select", function (e, clickedIndex, newValue, oldValue) {
        newOption = ""; //Reset newOption before doing a new search
    });
});

Answer 2

很棒的脚本，但您的脚本一直是空的...

在$(e.currentTarget).append($('<option>').val(searchPhrase).text(searchPhrase));

后面加上即可

$(e.currentTarget).find("option").each(function(index, element) {
                        
                        if ( $(this).text() == "" )
                        {
                            $(this).remove();   
                        }
                    });

Bootstrap Select 可编辑组合框黑客

Bootstrap Select Editable Combobox Hack

javascript

jquery

combobox

bootstrap-select

bootstrap-4

如何让我的用户将他们自己的选项添加到 bootstrap-select？

让用户将自己的值添加到 bootstrap-select 实时搜索功能 select 或