Question

我在我们的网站上使用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>

Answer 1

我没有您网页的完整代码，但您可以使用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;
}

如果要仅在有更多项目不在视图中时才显示滚动条。您可以将属性设置为auto。但这会使滚动条在数据发生变化时显示和隐藏，这将导致大多数用户讨厌的内容发生可怕的转变。如果我有你的整个页面代码我可以告诉你如何使建议div显示所有没有滚动条。

Answer 2

您可以将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将在需要时显示滚动条！

Answer 3

在Javascript中：document.getElementById（“myDIV”）。style.overflow =“scroll”;

在Css中，您可以使用overflow属性：overflow:scroll;

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

jQuery自动完成 - 最后一行在div中被“隐藏”

3 个答案: