Я пишу некоторый код, который включает в себя панель поиска / фильтра. Пользователь имеет возможность искать там элемент в базе данных и выбирать этот элемент. Однако, когда я запускаю приложение через сервер Eclipse / Spring-Boot / Tomcat, код запускается, но каждый элемент наслоен один на другой и не отформатирован должным образом, чтобы быть выпадающим. Я пытался изменить CSS, но мне не повезло. Моя база данных, из которой она извлекается, - это Microsoft SQL, и в ней около 1400 строк. Не уверен, что эта информация важна.
//Controller
@RequestMapping("/listTier")
public ModelAndView listTier(Model model) {
ModelAndView modelAndView = new ModelAndView();
List<AVSApplication>temp = new ArrayList<AVSApplication>();
ArrayList<String>plants = new ArrayList<String>();
try {
temp = mAppRepo.findAll(); //Fills List with data from DB
for(int x=0;x<temp.size();x++) {
plants.add(temp.get(x).getmAppName());
}
modelAndView.setViewName("home");
} catch (Exception e) {
e.printStackTrace();
modelAndView.setViewName("error");
}
modelAndView.addObject("plants",plants);
return modelAndView;
}
//jQuery
$(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 a").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
// This is the code to populate the field after selecting an option.
$("#myList a").on("click", function() {
var texto = $(this).text();
$("#myInput").val(texto);
});
});
/* ------------------------------------------------------------------------ */
/* HEADERS Landing page.css*/
/* ------------------------------------------------------------------------ */
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;
}
#modal-1 {
margin-top: 200px;
}
#modal-2 {
margin-top: 25px;
}
/* ------------------------------------------------------------------------ */
/* SEARCH FIELD */
/* ------------------------------------------------------------------------ */
.filter-search {
width: 100%;
}
.list-group {
position: absolute;
height: 500%;
overflow: auto;
}
#search-row{
width: 60%;
margin: 3% 15% 3% auto;
}
#myInput{
margin-top: 0;
}
<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<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>Application</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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="create.html">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">
App Mapping
</h3>
</div>
</div>
<div class="row" id="search-row">
<div class="col-md-8">
<div class="filter-search">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div class="list-group" id="myList" th:each="plants : ${plants}">
<a href="#" class="list-group-item list-group-item-action"><p th:text="${plants}"> <p></a>
</div>
</div>
</div>
<div class="col-md-4">
<span class="input-group-btn">
<button type="button" class="btn btn-success">View</button>
</span>
</div>
</div>
</div>
<!-- <script src="js/scripts.js"></script> -->
<script src="js/script.js"></script>
<script src="js/jquery.min.js"></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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>