jquery自动完成列表不会与父输入元素一起使用

我在将 jqueryUI自动完成功能调整到我网站的CSS布局时遇到了一些困难.

每当我将自动完成功能调用到输入字段时,列表将按预期打开.由于输入位于具有固定高度的div内,因此当用户滚动该div时,自动完成列表保持固定.

有没有人遇到这个并知道一个变通方法？如果父div的高度不固定,则不会发生此问题.

我在这里制作了一个jsfiddle模型：http://jsfiddle.net/NSm7f/1/

这是我的示例代码：

<div class="root">
    <div id="Header">
        <div class='heading'>Test</div>
    </div>
    <div class='Box' id="Wrapper">
        <div class='Box' id="Leftpanel">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>Autocomplete Box:
            <input id="Box1">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>Another autocomplete:
            <input id="Box2">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>
            <p>some text</p>
                <h1>Other stuff</h1>


            <br>
            <br>
        </div>
        <!--Leftpanel-->
        <div class='Box' id="Rightpanel">
            <form>
                <textarea rows="33" cols="45"></textarea>
                <br>
            </form>
        </div>
        <!--End rightpanel-->
    </div>
    <!--wrapper-->
</div>
<!--root-->

我的JS(是的,我有jqueryUI和默认的jqueryUI css加载)：

$("#Box1").autocomplete({
     source: ['Skull,Nasal','Skull,Lacrimal',Inferior Nasal Concha',Maxiallary',Zygomatic',Temporal',Palatine',Parietal',Malleus',Incus',Stapes',Frontal',Ethmoid',Vomer',Sphenoid',Mandible',Occipital','Rib 1','Rib 2','Rib 3','Rib 4','Rib 5','Rib 6','Rib 7','Rib 8 ','Rib 9 ','Rib 10 ','Coccyx']
 });

 $("input#Box2").autocomplete({
     source: ['Skull,'Coccyx']
 });

和我的css：

.Box {
    float: left;
}
#root {
    max-width: 1200px;
    margin: 0 auto;
}
#Wrapper {
    width: 100%;
    display: table;
}
#Leftpanel,#Rightpanel {
    vertical-align: top;
}
#Leftpanel {
    width: 57%;
    display: table-cell;
    height:750px;
    color: #B29D72;
    overflow:scroll;
    background-color: #272F44;
    -moz-border-radius: 2px;
    border-radius: 5px;
    padding: 1%;
    margin:0.5%
}
#Rightpanel {
    width: 37%;
    display: table-cell;
    height: 750px;
    color: #B2A283;
    background-color: #0D162C;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1%;
    margin:0.5%
}
#Sidebar {
    width: 15%;
    background-color: #B2A283;
    color: #0D162C;
    padding:1%;
    margin:0.5%;
    -moz-border-radius: 2px;
    border-radius: 5px;
}
#Sidebar a:link {
    color: #FFF4CB;
}
#Footer {
    width: 97%;
    height: auto;
    background-color: #B2A283;
    color: #0D162C;
    padding: 1%;
    margin: 0.5%;
    -moz-border-radius: 2px;
    border-radius: 5px;
}
#Footer a:link {
    color: #FFF4CB;
    padding-left: 5px;
    padding-right: 5px;
}
#Footer A:hover {
    color: #CA9221;
}
#Sidebar .slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}

解决方法

这是一个不涉及任何脚本的解决方案,似乎可以解决问题.

默认情况下,自动填充会将列表附加到文档正文.如果你将选项插入appendTo：“父div是固定高度”并从postion更改ui-autocomplete的UI-css类：fixed to position：relative,列表将跟随div滚动.

我认为这是一个更容易实现的解决方案,尽管@ Trevor也可以使用.

看到这个更新的小提琴：http://jsfiddle.net/NSm7f/3/

关键是将其添加到您的文档或更改UI-css：

.ui-autocomplete {
    position: relative;
}