Как отобразить выпадающий список «над» элементом ввода - PullRequest
Новая
       15

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

3 голосов
/ 09 ноября 2011

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

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

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

Есть идеи?

Ответы [ 2 ]

1 голос
/ 10 апреля 2013

Я изменил функцию 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-запросыдля них).

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

0 голосов
/ 23 июля 2012

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

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".

...