jQuery Autocomplete - 最后一行在 div 中“隐藏”答案

【问题标题】：jQuery Autocomplete - last row is 'hidden' within the divjQuery Autocomplete - 最后一行在 div 中“隐藏”
【发布时间】：2014-06-02 19:46:51
【问题描述】：

我在我们的网站上使用 jQuery 自动完成功能，它工作正常，除了偶尔无法看到自动完成返回的某些行，它们几乎隐藏在它所在的 div 中。

什么是最简单/最好的解决方案来实现这一点，以便它可以显示所有行并与包含的 div 重叠。

我的 CSS

.autocomplete-suggestions {
    background-color: #79BE28;
    border-radius: 7px;
    box-shadow: 0 4px 4px #CCCCCC;
    max-height: 650px !important;
    width: 520px !important;
}
.autocomplete-suggestions .autocomplete-suggestion {
    font-size: 12px;
    text-align: left;
    color: #fff;
    padding: 4px 15px;
    cursor: pointer;
}
.autocomplete-suggestions .autocomplete-suggestion:hover {
    font-weight: bold;
}
.autocomplete-suggestions .autocomplete-suggestion strong {
    text-decoration: underline;
}
.autocomplete-suggestion {
    z-index: -1 !important;
}

HTML

<div id="appendTo">
<div class="autocomplete-suggestions" style="position: absolute; max-height: 300px; z-index: 9999; width: 269px; display: block;">
<div data-index="0" class="autocomplete-suggestion"><strong>Sain</strong>t Ives Nursery, 15 Needingworth Road, St. Ives, Cambridgeshire, PE275JP, United Kingdom</div>
<div data-index="1" class="autocomplete-suggestion"><strong>Sain</strong>t Thomas More Catholic Primary School, Marsland Road  Hesters Way, Cheltenham, , GL510HX, United Kingdom</div>
<div data-index="2" class="autocomplete-suggestion"><strong>Sain</strong>t James' Primary School, Moorgreen Road, West End, Southampton, Hampshire, SO303EG, United Kingdom</div>
<div data-index="3" class="autocomplete-suggestion"><strong>Sain</strong>t Pius X Catholic High School, Wath Wood Road, Wath upon Dearne, Rotherham, South Yorkshire, S637PQ, United Kingdom</div>
<div data-index="4" class="autocomplete-suggestion"><strong>Sain</strong>t Benedict Catholic School, Duffield Road, Darley Abbey, Derby, Derbyshire, DE221JD, United Kingdom</div><div data-index="5" class="autocomplete-suggestion"><strong>Sain</strong>t Cecilia's Wandsworth CofE School, Sutherland Grove, London, Greater London, SW185JR, United Kingdom</div>
<div data-index="6" class="autocomplete-suggestion"><strong>Sain</strong>tfield High School, 21 Comber Road, <strong>Sain</strong>tfield, Ballynahinch, County Down, BT247BB, United Kingdom</div>
<div data-index="7" class="autocomplete-suggestion">My school is not listed</div></div>
<div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div>

【问题讨论】：

你可以给结果容器overflow-y:auto！
@DhavalMarthak 随意给我这个答案，我也接受
你能用jsfiddle.net创建一个演示吗？

标签： jquery css autocomplete client-side

【解决方案1】：

您可以将overflow-y:auto 设置为结果容器.autocomplete-suggestions

更多的结果不会被隐藏，您可以使用以下代码将其滚动到最后：

.autocomplete-suggestions {
    background-color: #79BE28;
    border-radius: 7px;
    box-shadow: 0 4px 4px #CCCCCC;
    max-height: 650px !important;
    overflow-y: auto; /* Add this */
    width: 520px !important;
}

为什么是auto？：因为如果你可以将它设置为滚动，即使内容不存在，它也会垂直显示滚动条！因此将其设置为auto 将在需要时显示滚动条！

【讨论】：

【解决方案2】：

在 Javascript 中：document.getElementById("myDIV").style.overflow="scroll";

在 Css 中你可以使用溢出属性：overflow:scroll;

在 jQuery 中你可以设置溢出为$('#someid').attr('name', 'value');

【讨论】：

【解决方案3】：

我没有您页面的完整代码，但您可以使用 overflow-y 属性向容器 div 添加滚动条，如下所示：

.autocomplete-suggestions {
  background-color: #79BE28;
  border-radius: 7px;
  box-shadow: 0 4px 4px #CCCCCC;
  max-height: 650px !important;
  overflow-y: scroll; /* property added */
  width: 520px !important;
}

如果您只想在有更多项目不在视图中时显示滚动条。您可以将属性设置为自动。但这将使滚动条在数据更改时显示和隐藏，这将使大多数用户讨厌的内容发生可怕的变化。如果我有你的整个页面代码，我可以告诉你如何让建议 div 全部显示而没有滚动条。

【讨论】：