Прошу помощи найти ошибку в коде

263

29 июля 2017, 05:47

Здравсвтуйте. Хочу делать динамический поиск на сайти по имени. Пол дня немог одну проблему решить, потом вроде решил, теперь опять не рабоатет) вообщем ниже я привел пример как оно должно работать. В этом коде впринцыпе все работает нормально. У меня на сайте код почти идентичен только чуть побольше он ниже. Помогите пожалуйста может я что-то упускаю но совсем не понимаю почему оно работает. Масив приходит в сервера все нормально, я запускаю функцию для товаром без скидки и со скидкой. Они отображаются нормально. Решил использовать эту же функцию при поиске но я совсем ничего не понимаю. Оно создает ('.'+productsType+'-wrapper') но не создает блоки с товаром к ним. Дело в том, что такая проблема только при поиске, когда функция запускается в $('input[search]').on('keyup', function(e){ Я совсем уже не понимаю из за чего оно может лагать. Я пробовал и поиск отключать и чтобы она запускалась просто при нажатии и не вводила требования для поиска всеравно так же не создаются блоки. Точнеё создаеться 1 для второго ('.'+productsType+'-wrapper') и то когда-как. Функция для примера

'use scrict'; 
$(function(){ 
let discArray = [{'name':'test1'},{'name':'test'},{'name':'test'},{'name':'test2'},{'name':'test3'}], 
    normArray = [{'name':'test'},{'name':'test1'},{'name':'test'},{'name':'test4'},{'name':'test'}]; 
function pushProducts(productsType, productData, search){ 
$('#'+productsType+'-products').empty(); 
let productCounter = 0, 
    firstWrapper = true; 
for(let i=0;i<productData.length;i++){ 
  if(search != null && productData[i].name.toLowerCase().indexOf(search.toLowerCase()) == -1 && search != '') continue; 
    if(firstWrapper || productCounter == 3){ 
        $('#'+productsType+'-products').append('<div class="'+productsType+'-wrapper"></div>'); 
        firstWrapper = false; 
        if(productCounter == 3) { 
            $('.'+productsType+'-wrapper').eq(this.length - 1).addClass('hide-slider-right'); 
            productCounter = 0; 
        } 
    } 
    productCounter++; 
    $('.'+productsType+'-wrapper').eq(this.length - 1).append(`<div class="item">Test</div>`); 
} 
} 
$('#test').on('keyup', function(e){ 
        pushProducts('norm', normArray, $(this).val()); 
        pushProducts('disc', discArray, $(this).val()); 
}); 
pushProducts('norm', normArray, ''); 
pushProducts('disc', discArray, ''); 
});

#disc-products, #norm-products{ 
background: grey; 
  width: 200px; 
  height: 100px; 
} 
.disc-wrapper{ 
width: 100px; 
height: 100%; 
background: red; 
float: left; 
} 
.norm-wrapper{ 
width: 100px; 
height: 100%; 
background: blue; 
float: left; 
} 
.item{ 
width: 20px; 
height: 20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="disc-products"></div> 
<div id="norm-products"></div> 
<input id="test" type="text">

Функция на моём сайте:

    //Get Products 
    var featured, 
        discount; 
    $.ajax({ 
        url: '/products.json', 
        success: function(data){ 
            featured = JSON.parse(data.featured); 
            discount = JSON.parse(data.discount); 
            pushProducts('featured', featured, null); 
            pushProducts('discount', discount, null); 
        } 
    }); 
    function pushProducts(productsType, productData, search){ 
            $('#'+productsType+'-products').empty(); 
            let productCounter = 0, 
                firstWrapper = true; 
            for(let i=0;i<productData.length;i++){ 
                if(search != null && productData[i].name.toLowerCase().indexOf(search.toLowerCase()) == -1 && search != '') continue; 
                if(firstWrapper || productCounter == 3){ 
                    $('#'+productsType+'-products').append('<div class="'+productsType+'-wrapper slide-styles"></div>'); 
                    firstWrapper = false; 
                    if(productCounter == 3) { 
                        $('.'+productsType+'-wrapper').eq(this.length - 1).addClass('hide-slider-right'); 
                        productCounter = 0; 
                    } 
                } 
                productCounter++; 
                $('.'+productsType+'-wrapper').eq(this.length - 1).append(`<div class="col-md-4"> 
                                                    <div class="footwear-item"> 
                                                    <div class="footwear-image background-for-images" style="background-image: url(css/images/`+productsType+`-products/`+productData[i].img+`)"></div> 
                                                    <div class="footwear-panel"> 
                                                        <p class="foonwear-name pt16">`+productData[i].name+`</p> 
                                                        <div class="footwear-price pt24">`+productData[i].price+`$</div> 
                                                        <button class="buy">BUY NOW</button> 
                                                    </div> 
                                                    </div> 
                                                    </div>`); 
                if(productsType == 'discount') $('#discount-products .footwear-image').eq(i).append('<div class="disc-mark"></div>'); 
            } 
    } 
    //Search 
    $('input[search]').on('keyup', function(e){ 
        if($(this).val() == '') $(this).css({'background-image': 'url(css/images/search-Icon.png)'}); 
        else $(this).css({'background-image': 'none'}); 
         
        pushProducts('featured', featured, ''); 
        pushProducts('discount', discount, ''); 
    });

На скриншоте показываю что при вводе в поле поиска вот вроде как создаеются 2 контейнера dispount-wrapper как и должно быть(всего 4 товара на каждый из видов на 1 контейнер не больше 3 товаров), но первый пустой, во втором 1 товар как и должен быть по счету(правда почему-то без марки скидки). а вот как сайт выглядит когда только заходишь на него

И если поле потом делаю пустым так-же ничего.