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">
    <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 class="carousel slide" data-ride="carousel" id="scarusel">
		<div class="carousel-inner" id="result"></div>
		<a class="carousel-control-prev" href="#scarusel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Предыдущий</span>
		</a>
		<a class="carousel-control-next" href="#scarusel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Следующий</span>
		</a>
		</div>
      </div>
      <div class="modal-footer">

      </div>
    </div>
  </div>
</div>

<script>
const Item = ({ url, img, title, active, id }) => `
    <div class="carousel-item ${active}">
      <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}, '${title}');">${title}</div></h5>
      </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 } //javascript:selectphoto('+item.id+", '"+item.photo_title+"');
				].map(Item).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>