将按钮添加到 Select2 下拉列表

Question

我使用的是最新版本的 Select2。想要在下拉列表的末尾添加一个插入新按钮。我尝试了网上找到的这两种解决方案

解决方案1：

$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');

解决方案2

$("#itemId0").select2("container").find("div.select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');

使用解决方案 1 没有任何反应。使用解决方案 2 我在选择 2 js 文件中收到错误消息

0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“应用”

有人可以帮忙吗？

这是我的 HTML

  <select id='itemId0' name='product[0][name]' class='form-control col-lg-5 itemSearch' >
                                <option></option>
                            </select>

和完整的 select2 javascript

           function productFormatResult(product) {
            if (product.loading) product.text;
            var html = "<table><tr>";
            html += "<td>";
            html += product.text;
            html += "</td></tr></table>";

            return html;
        }
        //  alert(html);
        function productFormatSelection(product) {
            var selected = "<input type='hidden' name='itemId' value='" + product.id + "'/>";
            return selected + product.text;
        }

        //$("#itemId0").select2();
        $("#itemId0").select2({

            ajax: {
                url: "@Url.Action("GetProducts", "Inventories")",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (data, params) {
                    return { results: data };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1,
            templateResult: productFormatResult,
            templateSelection: productFormatSelection,
            dropdownClass: 'bigdrop'
        });
       // $(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');
        $("#itemId0").select2("container").find("div.select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>');

Answer 1

核实

$('#select2').select2({
       placeholder: 'This is my placeholder',    
         language: {
             noResults: function() {
            return `<button style="width: 100%" type="button"
            class="btn btn-primary" 
            onClick='task()'>+ Add New Item</button>
            </li>`;
            }
         },
       
        escapeMarkup: function (markup) {
            return markup;
        }
    });
    

更新：（解释）

如果您需要在 select2 中添加按钮，如果没有找到结果，您只需要从noResults函数返回 HTML 按钮代码，并添加escapeMarkup函数来呈现自定义模板。

language: {
         noResults: function() {
        return `<button style="width: 100%" type="button"
        class="btn btn-primary" 
        onClick='task()'>+ Add New Item</button>
        </li>`;
        }
     },

    escapeMarkup: function (markup) {
        return markup;
    }

尝试下面的示例看看它的外观。

https://jsfiddle.net/Hamza_T/yshjqw85/32/

Answer 2

我认为这可以通过 Select2 的适配器和装饰器（ https://select2.org/advanced/default-adapters ）来完成。然而，我个人认为这种方法非常繁重，说实话我不理解有关该领域的文档。

我个人所做的是绑定 -eventselect2:open并附加一个 add-new-button 容器。

这是一个例子：

// create new container
$('#select2').select2CreateNew("Create new");

// generic function
$.fn.select2CreateNew = function( text ) {

    // bind to "open"-event
    this.on( 'select2:open', function( e ) {
        let name = $( this ).attr( 'name' );
        let html = '<div class="s-add-new-container">' + text + '</div>';
        let $resultContainer = $( '[aria-controls="select2-' + name + '-results"]' )
            .closest( '.select2-dropdown' ).find( '.select2-results' );

        // avoid duplicates ~ append "create new" to result bottom
        if ( $resultContainer.find( '.s-add-new-container' ).length === 0 ) $resultContainer.append( html );
    } );
}

每当用户单击容器时，自定义代码或添加一些单击事件处理程序。

对于样式，我使用这个 CSS：

.s-add-new-container {
    padding: 7px;
    background: #f1f1f1;
    border-top: 1px solid #c7c7c7;
}

.select2-dropdown.select2-dropdown--below {
    border-radius: 0px;
    box-shadow: 0px 5px 10px #6b6b6b59;
}

.s-add-new-container:hover {
    background: #3db470;
    color: white;
    cursor: pointer;
}