javascript - css 渲染位置和中断

Question

我在设计带有搜索结果的框时遇到了很大的麻烦。我只是不能把它放在输入框(搜索)下面，并以一种很好的方式列出结果。都是乱七八糟的，没有定位在输入框下面。所有的结果都是一个以上的。 (图中左下方是结果)

我的 HTML:

                    <li>
                    <form role="search" class="app-search hidden-sm hidden-xs m-r-10" class="searchb">
                        <div class="search-box">
                        <input type="text" placeholder="Search..." class="form-control" id="search" name="search"> <a href=""><i class="fa fa-search"></i></a>
                        <div class="results"></div></div>
                    </form>
                </li>

我的 CSS:

.search-box .results{
position:absolute;
}
.search-box .results a{
    padding: 5px 10px;
    max-height: 400px;
    overflow: auto;
    position: absolute;
    z-index: 990;
}

我的 PHP 代码输出的结果如下:

                while($row_data = $stmt_result->fetch_assoc()) {
                echo "<a href='index.php?id=prt&c=$row_data[id]'>$row_data[name]</a>";
            }

如果它很重要，我的结果是用 JS 获取的:

<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
   /* Get input value on change */
  var inputVal = $(this).val();
   var resultDropdown = $(this).siblings(".results");
   if(inputVal.length){
     $.get("search.php", {term: inputVal}).done(function(data){
        // Display the returned data in browser
        resultDropdown.html(data);
      });
  } else{
      resultDropdown.empty();
   }
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
   $(this).parents(".search-
box").find('input[type="text"]').val($(this).text());
   $(this).parent(".results").empty();
});
});
</script>

有人可以帮我解决问题吗？

Answer 1

您给 a 标签一个绝对位置，这导致它堆叠在彼此之上。如果您希望每个堆叠在自己的行上，请给它一个 position:relative; 和一个 display:block;。

.search-box .results a{
  padding: 5px 10px;
  max-height: 400px;
  overflow: auto;
  position: relative;
  z-index: 990;
  display:block;
}