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

css渲染位置和休息

1 个答案: