Ajax 实时文本框下推所有 Html 元素

Question

我在我的站点中使用了来自xml 文件的Ajax Live search。

搜索位于导航栏中的文本框，但是当我输入内容并获得结果时，导航栏的区域为范围并按下所有正文元素。

你能帮我解决这个问题吗？我在下面给出的代码。

<div class="col-sm-2" style="width:270px;">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Arama" onkeyup="showResult(this.value)" name="srch-term" id="srch-term">
                <div id="livesearch"></div>
        </div>
    </form>
</div>

我还没有分配任何 CSS。

#livesearch是php的函数。我没有放入整个导航栏，因为它很长.. 但是这个搜索栏是导航栏元素之一，并在其中使用了引导代码。

谢谢

Answer 1

问题

Live Search 在input 之后附加一个div。当用户搜索某些内容时，这个div 会被html 填充，所以他的height 会发生变化，而他会将所有其余内容“推”走。

解决方案

您需要将此css 添加到您的。

#livesearch {
  position: absolute;
  background: #fff;
}

白色的background表示内容不会显示在搜索结果div后面。

更多关于absolute position你可以阅读here