jQuery的自动完成列表不与父母input元素棒 [英] jquery autocomplete list does not stick with parent input element

查看：159
本文介绍了jQuery的自动完成列表不与父母input元素棒的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一些水土不服jQueryUI的自动完成我的网站的CSS布局。

每当我所说的自动完成功能上的输入域，列表打开预期。由于输入住的div是固定高度，当该div用户滚动，自动完成列表保持固定的范围内。

有没有人遇到过这种，知道一种解决方法吗？当父DIV是不固定的高​​度不会发生此​​问题。

我在这里已经做了的jsfiddle样机： http://jsfiddle.net/NSm7f/1/

这是我的样品code：

 ＆LT; D​​IV CLASS =根＆GT;
    ＆LT; D​​IV ID =标题＆GT;
        ＆LT; D​​IV CLASS ='标题'＆GT;测试与LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS ='盒子'ID =包装＆GT;
        ＆LT; D​​IV CLASS ='盒子'ID =Leftpanel＆GT;
            ＆LT; P＆GT;有的文字＆lt; / P＆GT;
                ＆LT; H1＆gt;其他的东西＆LT; / H1＆GT;            ＆LT; BR＆GT;
            ＆LT; BR＆GT;自动完成框：
            ＆所述;输入的id =BOX1＆GT;
            ＆LT; P＆GT;有的文字＆lt; / P＆GT;
                ＆LT; H1＆gt;其他的东西＆LT; / H1＆GT;            ＆LT; BR＆GT;
            ＆LT; BR＆GT;另自动完成：
            ＆所述;输入的id =BOX2＆GT;
            ＆LT; P＆GT;有的文字＆lt; / P＆GT;
                ＆LT; H1＆gt;其他的东西＆LT; / H1＆GT;            ＆LT; BR＆GT;
            ＆LT; BR＆GT;
            ＆LT; P＆GT;有的文字＆lt; / P＆GT;
                ＆LT; H1＆gt;其他的东西＆LT; / H1＆GT;            ＆LT; BR＆GT;
            ＆LT; BR＆GT;
            ＆LT; P＆GT;有的文字＆lt; / P＆GT;
                ＆LT; H1＆gt;其他的东西＆LT; / H1＆GT;
            ＆LT; BR＆GT;
            ＆LT; BR＆GT;
        ＆LT; / DIV＆GT;
        ＆所述;！ -  Leftpanel  - ＆GT;
        ＆LT; D​​IV CLASS ='盒子'ID =Rightpanel＆GT;
            ＆LT;形式为GT;
                ＆LT; textarea的行数=33COLS =45＆GT;＆LT; / textarea的＆GT;
                ＆LT; BR＆GT;
            ＆LT; /表及GT;
        ＆LT; / DIV＆GT;
        ＆所述;！ - 结束rightpanel  - ＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;！ - 包装 - ＆GT;
＆LT; / DIV＆GT;
＆LT;！ - 根 - ＆GT;

我的JS（是的，我有jQueryUI的，默认jQueryUI的CSS加载）：

  $（＃BOX1）。自动完成（{
     来源：['骷髅，鼻'，'骷髅，泪'，'头骨，下鼻甲'，'骷髅，Maxiallary'，'骷髅，颧骨'，'骷髅，时间'，'颅骨，腭'，'骷髅，顶'，'骷髅，锤骨，骷髅骨，砧骨'，'骷髅，镫骨'，'骷髅，前腰，骷髅，筛'，'骷髅，犁骨'，'骷髅，蝶窦'，'头骨，下颌骨 头骨，枕，肋1'，'肋2'，'肋3'，'肋4'，'肋5'，'肋6'，'肋7'，'肋8'，'肋9 '，'肋10'，'尾骨']
 }）; $（＃输入BOX2）。自动完成（{
     来源：['骷髅，鼻'，'骷髅，泪'，'头骨，下鼻甲'，'骷髅，Maxiallary'，'骷髅，颧骨'，'骷髅，时间'，'颅骨，腭'，'骷髅，顶'，'骷髅，锤骨，骷髅骨，砧骨'，'骷髅，镫骨'，'骷髅，前腰，骷髅，筛'，'骷髅，犁骨'，'骷髅，蝶窦'，'头骨，下颌骨 头骨，枕，肋1'，'肋2'，'肋3'，'肋4'，'肋5'，'肋6'，'肋7'，'肋8'，'肋9 '，'肋10'，'尾骨']
 }）;

和我的CSS：

  .box的{
    浮动：左;
}
＃根 {
    最大宽度：1200像素;
    保证金：0汽车;
}
#wrapper指定{
    宽度：100％;
    显示：表;
}
#Leftpanel，#Rightpanel {
    垂直对齐：首位;
}
#Leftpanel {
    宽度：57％;
    显示：表细胞;
    高度：750px;
    颜色：＃B29D72;
    溢出：滚动;
    背景颜色：＃272F44;
    -moz-边界半径：2px的;
    边界半径：5像素;
    填充：1％;
    保证金：0.5％
}
#Rightpanel {
    宽度：37％;
    显示：表细胞;
    高度：750px;
    颜色：＃B2A283;
    背景颜色：＃0D162C;
    -moz-边界半径：5像素;
    边界半径：5像素;
    填充：1％;
    保证金：0.5％
}
#Sidebar {
    宽度：15％;
    背景颜色：＃B2A283;
    颜色：＃0D162C;
    填充：1％;
    保证金：0.5％;
    -moz-边界半径：2px的;
    边界半径：5像素;
}
#Sidebar一：链接{
    颜色：＃FFF4CB;
}
#Footer {
    宽度：97％;
    身高：汽车;
    背景颜色：＃B2A283;
    颜色：＃0D162C;
    填充：1％;
    保证金：0.5％;
    -moz-边界半径：2px的;
    边界半径：5像素;
}
#Footer一：链接{
    颜色：＃FFF4CB;
    填充左：5像素;
    填充右：5像素;
}
#Footer答：悬停{
    颜色：＃CA9221;
}
#Sidebar .slide出-DIV {
    填充：20像素;
    宽度：250像素;
    背景：#CCC;
    边框：1px的固体＃29216d;
}


解决方案

下面是一个不涉及任何脚本，似乎做的伎俩的解决方案。

自动完成，默认情况下，追加的列表中文件的体。如果您插入选项 appendTo：那是固定高度的父DIV并更改UI的CSS类 UI的自动完成从现在的位置是：固定位置：相对的，名单将按照DIV滚动

我觉得这是贯彻落实，虽然@ Trevor的还将致力于一个更简单的解决方案。

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

关键是将其加入您的文档或更改UI-CSS：

 的.ui-自动完成{
    位置：相对;
}

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

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.

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

I've made a jsfiddle mockup here: http://jsfiddle.net/NSm7f/1/

here is my sample code:

<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-->

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']
 });

and my 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;
}

解决方案

Here is a solution that does not involve any scripting and seems to do the trick.

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.

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

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

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

.ui-autocomplete {
    position: relative;
}

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆