Question

我在将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', '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;
}

Answer 1

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

默认情况下，自动填充会将列表附加到文档的body。如果您将选项插入appendTo: "parent div that is fixed height"并从位置更改ui-autocomplete的UI-css类：固定到position：relative，则列表将跟随div滚动。

我认为这是一个更容易实现的解决方案，不过@ Trevor也可以使用。

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

关键是将其添加到您的文档中或使用以下命令更改UI-css：

.ui-autocomplete {
    position: relative;
}

Answer 2

以下是一个选项，您还可以整合autocomplete来电，这样您就无需在每个方框中单独调用它：

 var scrollPosition = -1;
 $("[id^=box]").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'],
     open: function( event, ui ) {
         scrollPosition = $('#Leftpanel').scrollTop();  
     },
     close: function(event, ui ){
         scrollPosition = -1;     
     }
});
$('#Leftpanel').scroll(function(){
    if(scrollPosition != -1){
       $('#Leftpanel').scrollTop(scrollPosition); 
        $('#Wrapper').focus();
    }
});

实施例

http://jsfiddle.net/trevordowdle/9m2Qg/

示例2（改进的滚动）

http://jsfiddle.net/trevordowdle/9m2Qg/3/

仅在Google Chrome上测试过。

Answer 3

最好的方法是给父元素ui-front类，ui-autocomplete处理它：https://api.jqueryui.com/autocomplete/#option-appendTo

Answer 4

默认情况下，自动完成将附加到文档的“正文”。因此，您使用jQuery appendTo 将auto-complete附加到父div。

＆＃xA;＆＃xA;

试试这个。

＆＃xA;＆＃xA;

  $（“＃textboxId”）。autocomplete（{＆＃xA ; appendTo：“＃parentId”，＆＃xA;}）; ＆＃XA;

＆＃XA;

Answer 5

我在我正在处理的项目上也有同样的问题，但是在其他一些答案中提到的appendTo解决方案，我决定以与原生组合框架相同的方式实现自动完成。如果滚动父div，则关闭自动完成菜单。我通过向关闭菜单（https://api.jqueryui.com/autocomplete/#method-close）的父div添加onscroll事件监听器来实现这一点。

我选择此解决方案是因为如果将自动填充附加到父div而不是body，如果它位于div的下半部分，则当打开自动填充菜单时，有时会出现滚动条。

Answer 6

我遇到了同样的问题，因为我的字段在表格中。我就是这样修的

let input = $('.autocomplete');

input.autocomplete({
  appendTo: input.parents().eq(0),
});

jquery自动完成列表不会坚持使用父输入元素

6 个答案: