Select2 Прокрутка текущего диапазона выбора до нижнего уровня при каждом выборе (closeOnSelect = False) - PullRequest
Новая
       10

Select2 Прокрутка текущего диапазона выбора до нижнего уровня при каждом выборе (closeOnSelect = False)

0 голосов
/ 11 сентября 2018

JSFiddle: http://jsfiddle.net/xpvt214o/776660/

У меня есть элемент Multi-Select select2 с фиксированной высотой в 1 строку.Когда я выбираю несколько новых элементов, они добавляются, но диапазон не перемещает курсор в конец «текущего» поля.Текущий селектор застрял на текущей строке.Он перемещается в конец только после того, как я покидаю процесс выбора.

Я попробовал этот код, который можно прокомментировать / отключить, чтобы увидеть исходную проблему: 

/* Scroll CurrSel SPAN to bottom on every Select2 Select event */
/* Comment/Toggle this ON/OFF for testing */
$('#dropdown').on("select2:selecting", function(e) { 
    var currselspan = $('#dropdown').next().find('.select2-selection--multiple').first();
    console.log('scrollTop = ' + $(currselspan).scrollTop() + ' scrollHeight = ' + $(currselspan).prop('scrollHeight'));
    $(currselspan).scrollTop($(currselspan).prop('scrollHeight'));
});

Это улучшение, но есть еще проблема: когда новая запись переходит на следующую строку, диапазон выбора Curr не прокручивается.Прокрутка начинается только после того, как запись новой строки уже введена в .

ЦЕЛЬ: В любое время, когда вводится новая строка, автоматически прокручивается конец текущего выбора.

1 Ответ

0 голосов
/ 11 сентября 2018

Просто добавьте строку ниже к вашему методу. 

$(".select2-selection--multiple input").focus();

Итак, ваш метод будет 

$('#dropdown').on("select2:selecting", function(e) { 
    var currselspan = $('#dropdown').next().find('.select2-selection--multiple').first();
    console.log('scrollTop = ' + $(currselspan).scrollTop() + ' scrollHeight = ' + $(currselspan).prop('scrollHeight'));
    $(currselspan).scrollTop($(currselspan).prop('scrollHeight'));
    $(".select2-selection--multiple input").focus();
});

Вы можете проверить это здесь .. http://jsfiddle.net/xpvt214o/776765/

...