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

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

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

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

Любые идеи?


plugins jquery css positioning jquery-tokeninput
person gordyr    schedule 09.11.2011    source источник
comment
Было бы полезно иметь образец вашей структуры html / css для нижнего колонтитула, а также вывод tokeninput, чтобы мы знали, с чего начать. Сказав это, я могу представить, как поднять список вверх, единственное, что вам нужно сделать, это изменить порядок отображения элементов, чтобы они отображались в желаемом порядке (при условии, что это желательно).   -  person Capagris    schedule 09.11.2011
comment
Привет, Соткра, хоть убей, я не могу найти способ копирования / вставки HTML, который генерирует «tokeninput». HTML добавляется к основному тексту документа и снова удаляется при размытии, поэтому, как только я нажимаю на firebug, HTML исчезает. Не могли бы вы описать свои идеи, но я уверен, что смогу выработать что-то, что указывало бы в правильном направлении. Большое спасибо!   -  person gordyr    schedule 11.11.2011
comment
как насчет живой ссылки на демонстрацию вашей страницы?   -  person Capagris    schedule 13.11.2011

Ответы (2)


arrow_upward
1
arrow_downward

Я изменил функцию 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-реквесты).

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

person Colin Young    schedule 10.04.2013
comment
Я должен отметить, что у моего решения есть некоторые проблемы с позиционированием, поэтому оно не является полностью универсальным. Вам нужно протестировать это в вашей конкретной реализации. - person Colin Young; 18.04.2013

arrow_upward
0
arrow_downward

Я думаю, вам нужно изменить код в функции 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();
    }

Просто отрегулируйте правильно "верхний" рекламный "левый" параметры.

person zekia    schedule 23.07.2012