<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">×</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>