如何显示“上方”的下拉列表输入元素

发布于 2024-12-14 12:49:32 字数 253 浏览 1 评论 0原文

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

这一切都工作正常,但是我需要在页面上的固定页脚中输入内容,这意味着下拉列表本身会离开页面底部。

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

有什么想法吗?

I am using jQuery Tokeninput plugin to display an autocomplete list of musical artist names, delivered via jsonp.

This all works fine, however I need to have the input in a fixed footer on the page meaning that of course, the dropdown list itself goes off the bottom of the page.

I would like to invert this behaviour and have the drop down list apear 'above' the input element, but I can't seem to find a way to achieve this.

Any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

︶ ̄淡然 2024-12-21 12:49:32

我修改了 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();
    }
}

我还在 tokenInput 中添加了 maxHeight 属性,并使用它来检查空间并设置下拉列表的大小。

在这里尝试一下:http://jsfiddle.net/colin_young/dvuHD/19/ (请注意,我的版本与库存版本相比有一些重大修改,我只是没有机会为它们创建拉取请求)。

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

I modified the show_dropdown function to automatically determine if it should display above or below:

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();
    }
}

I've also added a maxHeight property to tokenInput and use it to both check for space and set the size of the dropdown.

Try it out here: http://jsfiddle.net/colin_young/dvuHD/19/ (note that my version has some significant modifications from the stock version, I just haven't had a chance to create pull-requests for them).

No attempt is made to ensure there is space above however. The assumption is that if there is no space below and none above there isn't a lot you can do, although centering on the input element might be a good compromise.

雪落纷纷 2024-12-21 12:49:32

我认为您必须更改 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();
    }

只需正确调整“顶部”广告“左侧”参数即可。

I think that you have to change the code in show_dropdown() function, inside 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();
    }

Just adjust the "top" ad "left" parameters properly.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文