Добавить кнопку в раскрывающийся список Select2

Я использую последнюю версию 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 я получаю сообщение об ошибке в файле select 2 js

0x800a138f — ошибка выполнения JavaScript: невозможно получить свойство «применить» неопределенной или нулевой ссылки

Кто-нибудь может помочь?

Вот мой HTML

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

И полный javascript select2

           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>');

jquery-select2 jquery-select2-4
person Daniel Antwi    schedule 11.02.2016    source источник
comment
Пожалуйста, приведите полный пример, как выглядит html? какие файлы javascript включены в этот экземпляр?   -  person Ashkan Hovold    schedule 11.02.2016
comment
ты разобрался? У меня точно такая же проблема с получением контейнера select2   -  person BeardedMan    schedule 16.06.2016
comment
Может быть, этот пост может быть полезен stackoverflow.com/questions/20977400/   -  person Olga Akhmetova    schedule 20.02.2017

Ответы (3)


arrow_upward
2
arrow_downward

Проверь это

$('#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, если результат не найден, вам просто нужно вернуть HTML-код кнопки из функции noResults и добавить функцию 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/

person Hamza T    schedule 10.09.2020
comment
Пожалуйста, добавьте некоторые пояснения к вашему ответу - person kk.; 10.09.2020

arrow_upward
1
arrow_downward

Вот пример в codepen.

html ниже

<select id="CustomSelect" multiple="multiple">
  <option value="volvo">BMW</option>
  <option value="saab">Jaquar</option>
  <option value="mercedes">RR</option>
  <option value="audi">Audi</option>
</select>

CSS ниже

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

Script ниже

$("#CustomSelect").select2({  
 width: '100%',
        allowClear: true,
        closeOnSelect: false
        
 }).on('select2:open', function () {
        let a = $(this).data('select2');
        if (!$('.select2-link').length) {
            a.$results.parents('.select2-results')
                .append('<div class="select2-link2 select2-close"><button>Close</button></div>')
                .on('click', function (b) {
                });
        }
    });
person R J    schedule 06.01.2021

arrow_upward
0
arrow_downward

Я думаю, это можно сделать с помощью адаптеров и декораторов Select2 (https://select2.org/advanced/default-adapters). Однако лично я нахожу этот подход очень тяжелым и, честно говоря, я не понимаю документацию в этой области.

Что я лично делаю, так это привязываюсь к событию select2:open и добавляю контейнер с новой кнопкой.

Вот пример:

// 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;
}
person Unicco    schedule 08.09.2020