代码之家  ›  专栏  ›  技术社区  ›  vikmalhotra

带有自动完成建议的固定位置搜索框

  •  4
  • vikmalhotra  · 技术社区  · 15 年前

    在我的webapp中,我在网页顶部的固定工具栏中有一个搜索框。 我这样实现了工具栏的固定位置…..

    工具栏{ 位置:固定!重要的; 位置:绝对; 高度:25px; 宽度:100%; 顶部:0px; 左:0px; 保证金:0; Z指数:100; 字体大小:12px; } < /代码>

    现在,我正在使用jquery插件在其上实现关键字autocomplete函数。

    我的问题是,当滚动/调整窗口大小时,如何将自动完成建议固定/附加到搜索框中。

    用于自动完成建议的CSS框是…..

    element.style{
    显示:无;
    左:166px;
    位置:绝对;
    顶部:96PX;
    宽度:130px;
    }
    ACX结果{
    背景色:白色;
    边界:1px固体c5dbec;
    溢出:隐藏;
    填料:0;
    Z指数:99999;
    }
    < /代码> 
    
    

    我在执行这些操作时遇到问题…

    1. 在搜索框中键入内容,使建议出现
    2. 打开搜索框后,我滚动窗口。
    3. 这也会导致自动提示框滚动。

    我能做些什么来解决这个bug?

    这是它的样子。

    自动完成功能已滚动到固定位置的输入框上。

    update1:I tryed adding theposition:fixed;to the autocomplete.

    在另一种情况下会出现问题。

    • 在搜索框中键入内容,使建议出现
    • 按Escape键,使盒子消失
    • 向下滚动窗口
    • 在搜索框中键入内容,使建议出现
    • 现在,搜索框出现在滚动之前出现的位置,因为位置是固定的

    更新

    更新2:。

    下面的代码添加到自动完成的CSS中就完成了这个技巧。

    .ac_结果{
    背景色:白色;
    边界:1px固体c5dbec;
    溢出:隐藏;
    填料:0;
    Z指数:99999;
    位置:固定;
    顶部:0px;
    页边距:20px 0px 0px 0px;/*上页边距定义文本框的偏移量*/
    }
    < /代码> 
    
    

    关于

    #toolbar {
            position: fixed !important; 
            position: absolute;
            height: 25px;
            width: 100%;
            top: 0px;
            left: 0px;
            margin: 0;
            z-index: 100;
            font-size: 12px;
        }
    

    现在,我正在使用a jQuery plugin.

    我的问题是如何在滚动/调整窗口大小时将自动完成建议固定/附加到搜索框。

    “自动完成的CSS建议”框是…

    element.style {
       display:none;
       left:166px;
       position:absolute;
       top:96px;
       width:130px;
    }
    .ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
    }
    

    我在执行这些操作时遇到问题。

    1. 在搜索框中键入内容,使建议出现
    2. 打开搜索框后,我滚动窗口。
    3. 这也会导致自动提示框滚动。

    我能做些什么来解决这个bug?

    这是它的样子。

    alt text

    自动完成功能已滚动到固定位置的输入框上。

    更新1:我试着把position: fixed;自动完成。

    在另一种情况下,这就产生了问题。

    • 在搜索框中键入内容,使建议出现
    • 按Escape键,使盒子消失
    • 向下滚动窗口
    • 在搜索框中键入内容,使建议出现
    • 现在,搜索框出现在滚动之前出现的位置,因为位置是固定的

    更新:

    alt text

    更新2:

    下面的代码添加到自动完成的CSS中就可以做到这一点。

    .ac_results {
           background-color:white;
           border:1px solid #C5DBEC;
           overflow:hidden;
           padding:0;
           z-index:99999;
           position: fixed;
           top: 0px;
           margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
        }
    

    当做

    3 回复  |  直到 11 年前
        1
  •  3
  •   Pete    15 年前

    为什么不做搜索结果呢 position: fixed 也?只要知道文本框的高度,就可以定位结果列表,使其始终位于textbox元素之下。

        2
  •  0
  •   Alex    15 年前

    position:fixed 不是做你想要的事情的方法。

    职位:Absolute应该已经解决了你的问题,尽管这让我觉得他们要么是一个浏览器错误(浏览器已经测试过),要么是插件中的某个东西,要么是CSS正在覆盖 position:absolute 具有 位置:固定 -你在firefox中检查过firebug来查看下拉框中实际应用的css了吗?

    这是我能想到的唯一2个原因来解释你所看到的。

        3
  •  0
  •   Cfrim    11 年前

    位置:容器上的相对位置,包含结果列表(具有位置:绝对)可以解决问题。