3

我正在使用jQuery Tokeninput插件来显示音乐艺术家姓名的自动完成列表，通过 jsonp 传递。

这一切都很好，但是我需要在页面上的固定页脚中输入内容，这意味着下拉列表本身当然会离开页面底部。

我想反转这种行为并使下拉列表出现在输入元素的“上方”，但我似乎找不到实现这一目标的方法。

有任何想法吗？

4

2 回答 2

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/（请注意，我的版本对库存版本进行了一些重大修改，我只是没有机会为它们创建拉取请求）。

然而，没有尝试确保上面有空间。假设是，如果下方没有空间且上方没有空间，则您无能为力，尽管以输入元素为中心可能是一个很好的折衷方案。

于 2013-04-10T18:57:08.997 回答
0

我认为您必须在jquery.tokeninput.js文件中更改show_dropdown()函数中的代码：

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”参数即可。

于 2012-07-23T10:41:32.517 回答