Результат поиска не перемещается в первый столбец на сайте - поиск в HTML5

Question

Я делаю свою фотогалерею с большим количеством фотографий, и я хотел бы использовать функцию сортировки и функцию поиска.Функция сортировки работает нормально, а функция поиска - нет.

Я все еще могу искать, но результат не попадает в первый столбец, но остается в исходном месте, что сбивает с толку людей, так как там много пустого места.Вы можете только прокрутить вниз, чтобы увидеть, что осталось.

Я пробовал много шаблонов онлайн, и только это работает.

это макет:

это результат сортировки, вы можете видеть только 2 картинки слева и он перемещается под строкой поиска

это результат поиска, вы можетесмотрите только 1 рис слева и оставайтесь в исходном положении и не двигайтесь под строкой поиска.

      <script>
    function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
    }
    </script>


<style>
.portfolio-items,
.portfolio-filter {
    list-style: none;
    padding: 0;
    margin: 0 -20px 20px 0;
}

.portfolio-filter > li {
    display: inline-block;
}

.portfolio-filter > li a.active {
    color: #FFF;
    background: #00645a;
    border: 2px solid #00645a;
}

.portfolio-items > li {
    float: left;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.portfolio-items.col-2 > li {
    width: 50%;
}

.portfolio-items.col-3 > li {
    width: 33%;
}

.portfolio-items.col-4 > li {
    width: 25%;
}

.portfolio-items.col-5 > li {
    width: 20%;
}

.portfolio-items.col-6 > li {
    width: 16%;
}

.portfolio-item {
    padding: 0;
    margin: 0;
}

.portfolio-item .item-inner {
    background: #fff;
    padding: 0;
    margin: 0 20px 20px 0;
    position: relative;
}


.portfolio-item img {
    width: 100%;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.portfolio-item img:hover {
    width: 100%;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

.portfolio-item h5 {

    background: #fff;
    margin: 0;
    padding: 5px;
    font-weight: 600;
    font-size: 14px;
    text-overflow: ellipsis;
    position: relative;
    border-bottom: 4px solid #fff;
    text-transform: uppercase;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.portfolio-item:hover h5,
.team-member:hover .team-content,
.post:hover .content {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    border-bottom: 4px solid #00645a;
}

.portfolio-item h5:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 0px;
    margin-left: 0px;
}

.portfolio-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, 0.9);
    text-align: center;
    vertical-align: middle;
    -webkit-transition: opacity 300ms;
    -moz-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
}

.portfolio-item .overlay .preview {
    position: relative;
    top: 50%;
    display: inline-block;
    margin-top: -20px;
}

.portfolio-item:hover .overlay {
    opacity: 1;
}


#myUL {

     list-style-type: none;

}

#myUL li a {

    display: block;

}

/* Start: Recommended Isotope styles */


/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}


/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    -ms-transition-duration: .8s;
    -o-transition-duration: .8s;
    transition-duration: .8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: 0 opacity;
    -moz-transition-property: 0 opacity;
    -ms-transition-property: 0 opacity;
    -o-transition-property: 0 opacity;
    transition-property: transform, opacity;
}
</style>

<div id="content-wrapper">
        <section id="portfolio" class="white">
            <div class="container">
                <div class="gap"></div> 
                    <div class="center gap fade-down section-heading">
                        <h2 class="main-title">VIDEO</h2>
                        <hr>
                        <p>You can find all training video if you want to refresh your memory.</p>
                    </div> 
                    <ul class="portfolio-filter fade-down center">
                        <li><a class="btn btn-outlined btn-primary active" href="#" data-filter="*">All</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".h">Nature</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".g">City</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".f">Road</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".e">Car</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".d">Plane</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".c">Train</a></li>
                        <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".b">River</a></li>
                         <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".a">Industrial</a></li>
                    </ul><!--/#portfolio-filter-->

                <div class="gap"></div> 
                <div class="search center animation bounce-in" ><span class="fa fa-search"></span><input id="myInput" onkeyup="myFunction()" class="filtr-search" value="" placeholder="Your Search" data-search="" type="text"><p></p></div>
                <div class="gap"></div> 

                    <ul id="myUL" class="portfolio-items col-3 isotope fade-up">
                        <li class="portfolio-item isotope-item in access account">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/vLYzgGXhj44" rel="prettyPhoto"><img src="images/video/city_1.jpg" alt="">
                                <h5 class="searchkeyword">Old town</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                        <li class="portfolio-item isotope-item incident a d g">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/qeLu68qXzps" rel="prettyPhoto"><img src="images/video/city_2.jpg" alt="">
                                <h5 class="searchkeyword">Raining Sky</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                        <li class="portfolio-item isotope-item incident h b c">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/l7DVd3nwdaw" rel="prettyPhoto"><img src="images/video/city_3.jpg" alt="">
                                <h5 class="searchkeyword">Sea</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                        <li class="portfolio-item isotope-item f g">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/5X354J5uTwg" rel="prettyPhoto"><img src="images/video/industrial_1.jpg" alt="">
                                <h5 class="searchkeyword">Galaxy</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->       

                      <li class="portfolio-item isotope-item incident e c a">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/ChJhXayrOL4" rel="prettyPhoto"><img src="images/video/industrial_2.jpg" alt="">
                                <h5 class="searchkeyword">Industrial</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                       <li class="portfolio-item isotope-item a  c">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/55W3CXfqLIY" rel="prettyPhoto"><img src="images/video/industrial_3.jpg" alt="">
                                <h5 class="searchkeyword">Highway</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                       <li class="portfolio-item isotope-item f b">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/XVnsgxuEZaA" rel="prettyPhoto"><img src="images/video/nature_1.jpg" alt="">
                                <h5 class="searchkeyword">Bue River</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                       <li class="portfolio-item isotope-item h b">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/XULUBg_ZcAU" rel="prettyPhoto"><img src="images/video/nature_2.jpg" alt="">
                                <h5 class="searchkeyword">City Night</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                       <li class="portfolio-item apps isotope-item b c">
                            <div class="item-inner">
                                <a class="preview" href="https://youtu.be/Rkkw8RhH9ck" rel="prettyPhoto"><img src="images/video/nature_3.jpg" alt="">
                                <h5 class="searchkeyword">Flight to SFO</h5></a>

                            </div>           
                        </li><!--/.portfolio-item-->
                    </ul>
                </div>
            </section>
    </div>

Answer 1

Проблема в том, что вы используете изотопный плагин, так как он управляет макетом li.Вы можете сделать фильтр с изотопом, так что вам не придется делать какие-либо другие стили, которые мешают изотопу.Вот что вы можете заменить своим сценарием:

<script>
$(document).ready(function() {
    'use strict';
    var portfolio_selectors = $('.portfolio-filter li a');
    var portfolio = $('.portfolio-items');

    if (portfolio_selectors != 'undefined') {
        portfolio.isotope({
            itemSelector: 'li',
            layoutMode: 'fitRows'
        });
        portfolio_selectors.on('click', function() {
            portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            portfolio.isotope({
                filter: selector
            });
            return false;
        });
        var search = $('#myInput');
        $(search).on('keyup', function(e){
          var filter = e.target.value;

          // filter by name
          portfolio.isotope({ 
            itemSelector: 'li',
            filter: function() {
              var name = $(this).find('h5').text();
              var found = name.toUpperCase().indexOf(filter.toUpperCase()) > -1;
              return found;
          } })
        });
    }

});

</script>

Вам придется удалить keyup="myFunction().