我正在尝试在Bootstrap 4中构建一个动态过滤器/搜索栏。我使用 jQuery 构建了搜索功能，并使用从数据库传递的值。但是，我遇到的问题是，当我键入并且选择的长度变短时，滚动条不会自行更新以缩小。相反，在搜索字段中有一个很大的空白区域。我相信这是一个CSS问题，但我似乎找不到解决方案。
索引.html：
<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="ISO-8859-1">
<title>UPS Application</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/landing-page.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/addTyler">Create</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
Taddm Mapping
</h3>
</div>
</div>
<div class="row" id="search-row">
<div class="col-md-8">
<div class="filter-search">
<input type="text" id="myInput" class="form-control" placeholder="Search.."/>
<table class="table table-bordered table-striped list-group" id="myList">
<tbody>
<tr>
<td>Customer Engagement Platform</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Route Target Worksheet</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Crisis </td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Empowered to Positively Impact our Customers</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Germany Brokerage System</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Point Management Tool</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Label Applicator Weighing</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Customized Pickup</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Alternate Upload Facility</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<td>Management System</td>
<td><a href="#" class="btn btn-primary">View</a></td>
</tr>
<tr>
<td>Test of a really long string as an examplefor when the others get ablank space</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
<tr>
<td>Test of a really long string as an examplefor when the others get ablank space. Supper long string to show how much i hate coding andf wish I was a stripper</td>
<td><a href="#" class="btn btn-primary">View</a></td> </tr>
<tr>
</tbody>
</table>
</div>
</div>
<div class="myForm">
<!-- <form th:action="@{/save}" method="POST"> -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update or Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="appcode" class="col-form-label">AppCode:</label>
<input type="text" class="form-control" id="appcode" name="appcode" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="save"/>
</div>
</div>
</div>
</div>
<!-- </form> -->
</div>
</div>
</div>
<script src="js/script.js"></script>
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
</body>
</html>
登陆页面.css：
/* ------------------------------------------------------------------------ */
/* HEADERS */
/* ------------------------------------------------------------------------ */
h3 {
margin-top: 30px;
}
/* ------------------------------------------------------------------------ */
/* MODAL */
/* ------------------------------------------------------------------------ */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}
.selectConfig {
margin: 0 auto 0 auto; /* Configures each select tag to be centered */
}
.form-control {
margin: 20px auto 20px auto; /* Configures each select tag to have spacing on top and bottom */
}
.modal-btn {
background-color: #fff;
color: #000;
font-weight: 600;
}
/* ------------------------------------------------------------------------ */
/* SEARCH FIELD */
/* ------------------------------------------------------------------------ */
.filter-search {
width: 100%;
}
.list-group {
position: absolute;
height: 600%;
overflow: auto;
}
#search-row{
width: 60%;
margin: 3% 15% 3% auto;
}
#myInput{
margin-top: 0;
}
脚本.js：
$(document).ready(function() {
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
// Here, it'll wait 100 miliseconds to hide the list.
setTimeout(function() {
$("#myList").toggle();
}, 250);
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
// This is the code to populate the field after selecting an option.
$("#myList tr").on("click", function() {
var texto = $(this).text();
$("#myInput").val(texto);
});
});
把它添加到你的 css 代码中。这将根据div 的内容调整高度。
#myList {
height: auto;
}
嗯...height: 600%规则看起来很奇怪。
在登陆页面中的 49 字符串上.css更改
.list-group {
position: absolute;
height: 600%;
overflow: auto;
}
对此：
.list-group {
position: absolute;
height: 100%;
overflow: auto;
}