FRONTEND_MVC/modules/manager/views/default/formSP.php

<div class="modal" tabindex="-1" data-show="false" id="sphoto" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Выбор всегда есть</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <div class="input-group mb-3">
        <input class="form-control" type="search" placeholder="Искатель" aria-label="Search" name="psearch" id="psearch" aria-describedby="btngo"><div class="input-group-append"><button type="button" id="btngo" class="btn btn-primary" onclick="javascript:return go();" tabindex="0">Go</button>
      </div></div>
      <div id="gallery" class="gallery">
      <div class="row" id="result"></div>
	  </div>
		</div>
      <div class="modal-footer">
		<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<script>
const Item = ({ url, img, title, active, id, titles }) => `
    <div class="carousel-item ${active}"  onclick="javascript:selectphoto( ${id}, '${titles}');">
      <img src="${img}" class="d-block w-100">
      <div class="carousel-caption d-none d-md-block">
        <h5 class="titles"><div class="title"  onclick="javascript:selectphoto( ${id}, '${titles}');">${title}</div></h5>
      </div>
`;

const Itema = ({ url, img, title, active, id, titles }) => `
<div class="col-4" data-key="${id}">
<div class="card mb-2 bg-gradient-dark">
<div class="pics animation all 1" data-key="${id}" onclick="javascript:selectphoto( ${id}, '${titles}');">
	<img class="img-fluid card-img-top" src="${img}" alt="">
	<div class="card-img-overlay d-flex flex-column justify-content-end cdark">
		<span class="titles"><div class="title"  onclick="javascript:selectphoto( ${id}, '${titles}');">${title}</div></span>
	</div>
</div>
</div>
</div>
`;

function go(){
	let s = $('#psearch').val();
	$.getJSON( "/manager/sphoto/search?search="+s, function( data ) {
		//$('#result').html(data.data);
		$( "#result" ).empty();
		if(data.status == 'ok'){
			$.each( data.data, function( i, item ) {
				let img = '/images/news/news/'+item.id+'_size3.jpg';
				var avtive = (i == 1)?'active':'';
				$('#result').append([
				{ url: '/manager/sphoto/show?id='+item.id, img: img, title: item.photo_title, active:avtive, id: item.id, titles:  item.photo_title.replace(/"/g, '&quot;') } //javascript:selectphoto('+item.id+", '"+item.photo_title+"');
				].map(Itema).join(''));

			});
			$('#scarusel').carousel('pause');
		}
	});
	return false;
}
$("#psearch").keyup(function(event){
    if(event.keyCode == 13){
        event.preventDefault();
		go();
    }
});
function selectphoto(id, title){
	let img = '/images/news/news/'+id+'_size2.jpg';
	$('#image').attr('src', img);
	$('#title-photo').text(title);
	$('#sphoto').modal('hide');
	$('#photo_name').val(id);
}
</script>
<style>
span.titles{
	text-shadow: 1px 1px 2px black;
	font-weight: bold;
}
.cdark{
	background: linear-gradient(#0000, #000a);
}
.cdark:hover{
	background: linear-gradient(#0000, #0000);
}
</style>