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

Posted 2023-05-09

【中文标题】如何在输入元素“上方”显示下拉列表

【英文标题】：How do I display a dropdown list 'above' the input element

【发布时间】：2011-12-25 12:14:48

【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

这将有助于为页脚提供 html/css 结构的示例以及 tokeninput 的输出，以便我们知道从哪里开始。话虽如此，我可以想象如何使列表上升，您唯一需要做的就是反转元素的“显示”顺序，以便让它们以所需的顺序出现（假设这是所需的）

嗨 Sotkra，我一辈子都找不到复制/粘贴“tokeninput”生成的 HTML 的方法。 HTML 被附加到文档的正文中，并在“模糊”时再次删除，因此一旦我点击萤火虫，HTML 就会消失。您能否描述一下您的想法，因为我确信我可以在正确的方向上解决一些问题。非常感谢！

页面演示的实时链接怎么样？

【参考方案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();
    

我还向 tokenInput 添加了一个 maxHeight 属性，并使用它来检查空间和设置下拉菜单的大小。

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

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

【讨论】：

我应该注意到我的解决方案存在一些定位问题，所以它不是一个完全通用的解决方案。您需要在您的具体实现中对其进行测试。

【参考方案2】：

我认为您必须在 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”参数即可。