Как отобразить выпадающий список "над" элементом ввода

Question

Я использую плагин jQuery Tokeninput для отображения автозаполнения списка имен музыкальных исполнителей, доставленных через jsonp.

Все это прекрасно работает, однако мне нужно, чтобы на странице был введен фиксированный нижний колонтитул, означающий, что, конечно, сам выпадающий список уходит в конец страницы.

Я хотел бы изменить это поведение и сделать раскрывающийся список "над" элементом ввода, но я не могу найти способ добиться этого.

Есть идеи?

Answer 1

Я изменил функцию show_dropdown, чтобы автоматически определить, должна ли она отображаться выше или ниже:

function show_dropdown() {
    if (input_box.is(':focus')) {
        var windowHeight = $(window).height();
        var docViewTop = $(window).scrollTop();
        var dropdownPosition = $(token_list).offset().top + $(token_list).outerHeight();
        var availableSpace = windowHeight - (dropdownPosition - docViewTop)
        var borderWidth = parseInt(dropdown.css('border-bottom-width'));

        if (availableSpace >= (settings.maxHeight + 2 * borderWidth)) {
            dropdown.css('bottom', '');
            $('body').css('position', '');

            dropdown.css({
                'border-top-width': 0,
                left: $(token_list).offset().left,
                top: $(token_list).offset().top + $(token_list).outerHeight()
            });
        } else {
            dropdown.css('top', '');

            var bodyHeight = $('body').outerHeight();
            var bodyTop = $('body').offset().top;
            var bottom;

            if ((bodyHeight + bodyTop) < dropdownPosition) {
                bottom = dropdownPosition - (bodyTop + bodyHeight) ;
            }
            else {
                bottom = (bodyTop + bodyHeight) - ($(token_list).offset().top + borderWidth);
            }

            dropdown.css({
                'border-top-width': borderWidth,
                'border-top-color': dropdown.css('border-bottom-color'),
                'border-top-style': dropdown.css('border-bottom-style'),
                'bottom': bottom,
                'left': $(token_list).offset().left - parseInt($('body').css('margin-left')),
                'position': 'absolute'
            });
            $('body').css({
                'position': 'relative'
            });
        }
        dropdown.css({
            maxHeight: settings.maxHeight,
            overflow: 'auto',
            zIndex: settings.zIndex
        }).show();
    }
}

Я также добавил maxHeight свойство tokenInput и используйте его для проверки места и установки размера раскрывающегося списка.

Попробуйте это здесь: http://jsfiddle.net/colin_young/dvuHD/19/ (обратите внимание, что моя версия имеет некоторые существенные изменения по сравнению со стандартной версией, у меня просто не было возможности создавать для них pull-запросы).

Тем не менее, не предпринимается никаких попыток обеспечить пространство выше. Предполагается, что если внизу нет места, а сверху нет места, вы ничего не можете сделать, хотя центрирование на элементе ввода может быть хорошим компромиссом.

Answer 2

Я думаю, что вы должны изменить код в функции show_dropdown(), внутри файла jquery.tokeninput.js:

function show_dropdown() {
        dropdown
            .css({
                position: "absolute",
                top: $(token_list).offset().top + $(token_list).outerHeight(),
                left: $(token_list).offset().left,
                zindex: 999
            })
            .show();
    }

Просто настройте параметры "top" и "left" правильно.