I implemented a search form that fetches data from the server and displays it in a div, which is working smoothly. However, when I added an ajaxComplete function to add a class for animating the results, it resulted in unexpected behavior.
Upon entering the first letter in the search box, both the search box and result container shift to the left of the page and back to their original position in a glitchy manner. Although this glitch only occurs after the first letter input, the results seem to toggle between opacity 0 and 1 repeatedly.
Below is the code snippet:
$('.search-box input[type="text"]').on("keyup input", function() {
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if (inputVal.length) {
$.get("backend-search.php", {
term: inputVal
}).done(function(data) {
resultDropdown.html(data);
});
} else {
resultDropdown.empty();
}
});
//-----------------------tablefade in
$(document).ajaxComplete(function() {
$('#resulttbl').addClass('fadein');
});.search-box {
width: 100%;
font-size: 1.7vw;
}
.search-box input[type="text"] {
height: 9%;
padding: 3% 2% 3% 2%;
border: 2px solid #d2d2d2;
font-size: 2vw;
border-radius: 30px;
color: #7b7b7b;
}
input:focus {
outline: none;
}
.result {
display: block;
height: 20%;
width: 90%;
margin: 0 5% 0 %5;
}
.search-box input[type="text"],
.result {
width: 100%;
box-sizing: border-box;
}
#resulttbl {
//---------this is the table loaded thru ajax
border-spacing: 40px;
}
input[type="text"]::placeholder {
color: #7b7b7b;
}
@keyframes fadein {
from {
opacity: 0;
margin-top: 0%;
}
to {
opacity: 1;
margin-top: 1.5%;
}
}
.fadein {
animation-name: fadein;
animation-duration: 400ms;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in;
box-sizing: border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Please search by Name, State, or Specialty..." />
<div class="result"></div>
</div>