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

Posted 2023-03-05

【中文标题】jquery自动完成列表不坚持父输入元素

【英文标题】：jquery autocomplete list does not stick with parent input element

【发布时间】：2014-01-15 11:23:44

【问题描述】：

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

【参考方案1】：

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

默认情况下，自动完成会将列表附加到文档的body。如果将选项插入appendTo: "parent div that is fixed height" 并将ui-autocomplete 的UI-css 类从postion:fixed 更改为position:relative，列表将跟随div 滚动。

我认为这是一个更容易实施的解决方案，尽管@Trevor 也可以。

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

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

.ui-autocomplete 
    position: relative;

【参考方案2】：

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

【参考方案3】：

这是一个选项，您还可以合并您的 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/

仅在谷歌浏览器上测试。

【讨论】：

@user1837608 如果它回答了您的问题或提供反馈，请将此答案标记为已接受。谢谢

谢谢，这个解决方案可以解决问题。对我来说一个问题是我有许多具有不同自动完成值的输入 - 所以我必须使代码适应每个实例，对吗？

我尝试在我的初始输入中使用appendTo 选项，但这没有效果。似乎这将是坚持它的理想方式！

@user1837608 我不知道您是否必须针对每个实例调整代码。如果您可以创建另一个演示该问题的小提琴，如果您还有一个我会很高兴看看为你准备。

【参考方案4】：

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

试试这个。

$("#textboxId").autocomplete(
   appendTo: "#parentId",   
); 

【参考方案5】：

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

我选择这个解决方案是因为如果自动完成被附加到父 div 而不是 body，并且如果它位于 div 的下部，有时会在打开自动完成菜单时出现滚动条。

【参考方案6】：

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

let input = $('.autocomplete');

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