jb-data.de/template/tpl/on_suche.tpl

<div id="spinner-div" class="pt-5">
    <div class="spinner-border text-primary" role="status">
		<i class="fas fa-spinner fa-pulse fa-10x"></i>
		<p>Loading...</p>
    </div>
</div>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-9">
			<div class="malist">		
				<div class="form-group">
					<div class="input-group" style="border-color: red">
						<span class="input-group-addon" ><i class="fad fa-search"></i></span>
						<input type="text" name="search_text" id="search_text" placeholder="Suche nach Label, Name, PLZ, Ort" class="form-control" style="background-color:#333;color:#fff;border-color:#115270"  />
					</div>
				</div>
				<div id="result" style="scrolling"></div>
			</div>
		
		
<!-- Sidebar -->
		<aside class="col-md-3" style="background-color: #333333">
			<p>Loading...</p>
		</aside>
	</div>	
</div>	

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content" id="ilomodal"></div> 
  </div>
</div>
	
{literal}
<style>
body {
  overflow: hidden;
}
	
.loader{
	display: none;
}		
.input-group-addon{
	background: #333;
	color: #fff;
	border: 1px solid #115270;
	border-right: 0px solid #115270;
}
.malist {
	overflow: auto;
	background: #222;
	color: #aaaaaa;
	padding: 5px;
	border: 1px solid #000;
	border-radius:6px;
	margin-top: -12px;
	margin-bottom: 10px;
	height: 530px;
}	
.maedit2 {
	background: #222;
	color: #aaaaaa;
	padding: 5px;
	border: 1px solid #000;
	border-radius:6px;
	margin-top: -12px;
	margin-bottom: 10px;
	min-height: 830px;
}
.menux {
	background: #222;
	padding: 5px;
	color: #909090;
	font-size: 28px;
	height: 50px;
	border-radius:6px;
	margin-top: -12px;
	margin-bottom: 20px;
}
.ma1 {
	background: #222222;
	color: #999;
	padding: 5px;
	font-size: 13px;
	min-height: 115px;
	max-height: 615px;
	border: 1px solid #115270;
	border-radius: 6px;
	margin-top: -12px;
	margin-left: -5px;
	width: 570px;
	display: -webkit-flex; 

	display: -ms-flexbox; 
	display: flex;		
}	
.max {
	background: #222;
	color: #115270;
	padding: 3px;
	border: 1px solid #115270;
	font-size: 13px;
	border-radius:6px;
	margin-top: -12px;
	margin-bottom: 20px;
	min-height: 50px;
}		
</style>	
<script>
$(document).ready(function() {

 load_data();

 function load_data(query)
 {
	$.ajax({
		url:"ajax.php?s=onfetch",
		method:"POST",
		data:{query:query},
		success:function(data)
		{
			$('#result').html(data);
		}
	});
 }
 $('#search_text').keyup(function(){
	var search = $(this).val();
	if(search != '')
		{
			load_data(search);
		}
			else
		{
			load_data();
		}
	});
});

function ma_wahl(maID) {
	$('#spinner-div').show();
	$.ajax({
		type: 'POST',
		url: "ajax.php?s=ma_edit&tpl",
		dataType: 'html',
		data: '&maID=' + maID,
		success: function (data) {
			console.log(data)
			$("#maedit").html(data); 
			$('#spinner-div').hide();
		}
	}); 
	$.ajax({
		type: 'POST',
		url: "ajax.php?s=ma_edit_sb&tpl",
		dataType: 'html',
		data: '&maID=' + maID,
		success: function (data) {
			console.log(data)
			$("#maedit2").html(data);  
		}
	}); 	
}
function ma_edit_sb(maID) {
	$('#spinner-div').show();
	$.ajax({
		type: 'POST',
		url: "ajax.php?s=ma_edit_sb&tpl",
		dataType: 'html',
		data: '&maID=' + maID,
		success: function (data) {
			console.log(data)
			$("#maedit2").html(data);
			$('#spinner-div').hide();			
		}
	}); 	
}	
function ma_tuer(maID) {
	$('#spinner-div').show();
	$.ajax({
		type: 'POST',
		url: "ajax.php?s=ma_tuer&tpl",
		dataType: 'html',
		data: '&maID=' + maID,
		success: function (data) {
			console.log(data)
			$("#maedit2").html(data);
			$('#spinner-div').hide();			
		}
	}); 	
}	
											
$(document).ready(function () {
    $("#do-call").click(function () {//The load button
        $('#spinner-div').show();//Load button clicked show spinner
        $.ajax({
            url: "https://jb-data.de/",
            type: 'GET',
            dataType: 'json',
            success: function (res) {
               //On success do something....
            },
            complete: function () {
                $('#spinner-div').hide();//Request is complete so hide spinner
            }
        });
    });
});	
</script>



{/literal}