jQuery自动完成列表不坚持使用父输入元素 [英] jquery autocomplete list does not stick with parent input element

问题描述

我有一些困难适应jqueryUI自动完成我的网站的CSS布局。

I'm having some difficulty adapting jqueryUI autocomplete to my site's CSS layout.

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

Whenever I call the autocomplete function onto an input field, the list opens as expected. Since the input lives within a div that is of fixed height, when the user scrolls that div, the autocomplete list stays fixed.

有人遇到此问题并了解解决方法？当父div的高度不固定时，不会发生此问题。

Has anyone encountered this and know of a workaround? This issue does not occur when the parent div is not fixed in height.

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

I've made a jsfiddle mockup here: 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加载）：

My JS (yes, I have jqueryUI and the default jqueryUI css loaded):

 $("#box1").autocomplete({
     source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,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,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', '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是固定高度并更改UI-css类为 ui-autocomplete from postion：fixed to position：relative，the list will follow the div scroll。

Autocomplete, by default, appends the list to the body of the document. If you insert the option to appendTo: "parent div that is fixed height" and change the UI-css class for ui-autocomplete from postion:fixed to position:relative, the list will follow the div scroll.

我认为这是一个更容易实现的解决方案，虽然@ Trevor的也会工作。

I think this is an easier solution to implement, though @Trevor's will also work.

查看此更新的小提琴： http://jsfiddle.net/NSm7f / 3 /

see this updated fiddle: http://jsfiddle.net/NSm7f/3/

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

The key is adding this to your document or change the UI-css with:

.ui-autocomplete {
    position: relative;
}

这篇关于jQuery自动完成列表不坚持使用父输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！