Jquery autocomplete have spaces between results and results not showing up in modal
Question
So my page is a basic school student/class manager. Currently I have two search bars which call different API calls which both return a List. The only problem is when I am displaying my results they have spaces between the results. Also another problem I am having is my autocomplete for my modal is hiding the results behind the popup.
BOB | Math
TIM | Science
Sarah | ENGLISH
Here is my HTML
<html>
<div class="card">
<div class="card-header">Search Name</div>
<div class="card-body" style="min-height:90px;">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Search</label>
<div class="col-sm-6 autocomplete">
<li class="ui-helper-hidden-accessible ui-menu-item"></li>
<input id="nameSearch" class="col-md-6 form-control mdb-autocomplete input-sm" type="text" placeholder="Enter Name">
</div>
</div>
</div>
<div class="modal-body mx-0">
<div class="form-group row">
<label class="col-sm-3 control-label textRightMiddle">Class Search</label>
<div class="col-sm-6 contRight autocomplete">
<input id="classSearch" class="col-md-6 form-control mdb-autocomplete input-sm form-control validate" type="text" placeholder="Enter Class">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12 contRight autocomplete">
<li class="ui-helper-hidden-accessible ui-menu-item"></li>
<input type="text" id="removeAutocomplete" class="btn btn-success form-control mdb-autocomplete input-sm" name="removeClassbutton" placeholder="Enter Class" onClick="removeClassfunction();">
</div>
</div>
</div>
</html>
And here is my JS code
<script>
$(function(){
$("#nameSearch").autocomplete({
delay:100,
source: function(request ,response){
$.ajax({
type: 'GET',
url: APICALL,
datatype: 'json',
data: {
term : request.term,
'name': $('#nameSearch')[0].value
}
});
}
});
$("#classSearch").autocomplete({
source: function(request ,response){
$.ajax({
type: 'GET',
url: APICALL,
datatype: 'json',
data: {
term : request.term,
'class': $('#removeAutocomplete')[0].value
}
});
}
});
});
</script>
I have tried adding #nameSearch { position: absolute; } #nameSearch { position: absolute; } and #classSearch{ position: absolute;} to my style but I have had no luck.
EDIT 1: I am stripping away unneeded that I discovered had no effect and lead me to the same problem.
2 answers
solution1
1 2019-09-16 15:58:05
What did you mean from "have spaces between the results"? Is it the space in each list item or space between ?
If you mean the space between each lish, you must take a look your server code not your frontend code. And if you mean the space between , just move your near .
And your problem with "modal is hiding the results behind the popup" simply put css: z-index:99999 !important; in your css file
solution2
0 2019-09-16 16:28:35
So I realized that this kind of problem wasn't an issue with the JS or HTML code. It came down to the CSS code that was put in place by someone else. Originally I had this
.ui-menu-item {
top: 27% !important;
background: #B1D3C5;
z-index: 999;
margin:24px 0 0 -40px !important;
padding:5px; left: 8px !important;
width: auto; list-style: none;
border-radius:2px;
}
And the margin was causing the extra space to be added after each result. I removed that and that fixed my issues.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.