Filtern Sie eine Liste mit minimalen und maximalen Werten

Question

Ich benutze list.js und ich habe mir die API angesehen, die gefunden werden kann here. Ich kann immer noch nicht herausfinden, wie man meine Min- und Max-Preis-Filter nur zu Ergebnissen bringt, wenn sie zwischen die beiden Bereiche passen.

Dies ist, was ich bisher:

var options = { 
 
    valueNames: ['category', 'price'] 
 
}; 
 

 
var featureList = new List('piece-search', options); 
 

 
$('#filter-red').click(function() { 
 
    featureList.filter(function(item) { 
 
     if (item.values().category == "Red") { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
    }); 
 
    return false; 
 
}); 
 

 
$('#filter-blue').click(function() { 
 
    featureList.filter(function(item) { 
 
     if (item.values().category == "Blue") { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
    }); 
 
    return false; 
 
}); 
 
    
 
$('#filter-none').click(function() { 
 
    featureList.filter(); 
 
    return false; 
 
}); 
 
    
 
$('#minPrice').on('change keydown paste input click', function(){ 
 
var minPrice = $('#minPrice').val(); 
 
    featureList.filter(function(item) { 
 
     if (item.values().price >= minPrice) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
    }); 
 
    return false; 
 
}); 
 
    
 
$('#maxPrice').on('change keydown paste input click', function(){ 
 
var maxPrice = $('#maxPrice').val(); 
 
    featureList.filter(function(item) { 
 
     if (item.values().price <= maxPrice) { 
 
      return true; 
 
     } else { 
 
      return false; 
 
     } 
 
    }); 
 
});

.item { 
 
    margin: 0.5em; 
 
    padding: 0.5em; 
 
    width: 40px; 
 
    height: 40px; 
 
    float: left; 
 
    color: white; 
 
} 
 

 
.item p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.filter { 
 
    cursor: pointer; 
 
    } 
 
} 
 

 
.sort.btn { 
 
    cursor: pointer; 
 
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="piece-search"> 
 

 
    <ul class="sort-by"> 
 
     <li> 
 
      <input class="search" placeholder="Search..."> 
 
      <input type="number" placeholder="min price" id="minPrice"/> 
 
      <input type="number" placeholder="max price" id="maxPrice"/> 
 
     </li> 
 
    </ul> 
 

 
    <ul class="filter"> 
 
     <li class="btn" id="filter-none">Show all</li> 
 
     <li class="btn" id="filter-red" value="category">Only show red divs</li> 
 
     <li class="btn" id="filter-blue" value="category">Only show blue divs</li> 
 
    </ul> 
 
        
 
    <ul class="list"> 
 

 
     <li class="item" style="background: blue"> 
 
      <p class="category">Blue</p> 
 
      <p class="price">14</p> 
 
     </li> 
 

 
     <li class="item" style="background: red"> 
 
      <p class="category">Red</p> 
 
      <p class="price">37</p> 
 
     </li> 
 
         
 
     <li class="item" style="background: blue"> 
 
      <p class="category">Blue</p> 
 
      <p class="price">22</p> 
 
     </li> 
 
         
 
     <li class="item" style="background: blue"> 
 
      <p class="category">Blue</p> 
 
      <p class="price">58</p> 
 
     </li> 
 
     
 
     <li class="item" style="background: red"> 
 
      <p class="category">Red</p> 
 
      <p class="price">45</p> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 1

Zunächst einmal müssen Sie Ihre Eingabe Werte in Zahlen umwandeln. Dann habe ich ein Ereignis für Ihre zwei Eingaben verwendet und nur eine if-Anweisung mit 2 Bedingungen verwendet.

Generell gilt: Wenn Sie Ihre Daten mit unterschiedlichen Bedingungen filtern möchten, müssen Sie diese an einem Ort verwenden (zum Beispiel können Sie Radio-Buttons für Rot- und Blautöne hinzufügen und dann, wenn Sie minPrice oder maxPrice Eingabe ändern kann, wenn die entsprechenden Radio überprüfen Eingabe wird geprüft und Filterdaten unter Berücksichtigung von Preis und Kategorie).

var options = { 
 
    valueNames: ['category', 'price'] 
 
}; 
 

 
var featureList = new List('piece-search', options); 
 

 

 

 

 
$('#minPrice, #maxPrice').on('change keydown paste input click', function() { 
 
    var minPrice = parseInt($('#minPrice').val(), 10); 
 
    var maxPrice = parseInt($('#maxPrice').val(), 10); 
 
    var category = $('[name="category"]:checked').val(); 
 
    featureList.filter(function(item) { 
 
    if(category === 'all') { 
 
     if (item.values().price >= minPrice && item.values().price <= maxPrice) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } else { 
 
     if (item.values().price >= minPrice && item.values().price <= maxPrice && item.values().category === category) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } 
 
    
 
    }); 
 
    return false; 
 
}); 
 

 

 

 
$('[name="category"]').on('change', function() { 
 
    var minPrice = parseInt($('#minPrice').val(), 10); 
 
    var maxPrice = parseInt($('#maxPrice').val(), 10); 
 
    var category = $('[name="category"]:checked').val(); 
 
    console.log(category) 
 
    featureList.filter(function(item) { 
 
    if(category === 'all') { 
 
     if (item.values().price >= minPrice && item.values().price <= maxPrice) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } else { 
 
     if (item.values().price >= minPrice && item.values().price <= maxPrice && item.values().category === category) { 
 
     return true; 
 
     } else { 
 
     return false; 
 
     } 
 
    } 
 
    
 
    }); 
 
    return false; 
 
});

.item { 
 
    margin: 0.5em; 
 
    padding: 0.5em; 
 
    width: 40px; 
 
    height: 40px; 
 
    float: left; 
 
    color: white; 
 
} 
 

 
.item p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.filter { 
 
    cursor: pointer; 
 
} 
 

 

 
} 
 
.sort.btn { 
 
    cursor: pointer; 
 
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="piece-search"> 
 

 
    <ul class="sort-by"> 
 
    <li> 
 
     <input class="search" placeholder="Search..."> 
 
     <input type="number" placeholder="min price" id="minPrice" value="0" /> 
 
     <input type="number" placeholder="max price" id="maxPrice" value="100" /> 
 
    </li> 
 
    </ul> 
 

 
    <div><label><input type="radio" name="category" value="all" checked>Show all</label></div> 
 
    <div><label><input type="radio" name="category" value="Red">Red</label></div> 
 
    <div><label><input type="radio" name="category" value="Blue">Blue</label></div> 
 

 
    <ul class="list"> 
 

 
    <li class="item" style="background: blue"> 
 
     <p class="category">Blue</p> 
 
     <p class="price">14</p> 
 
    </li> 
 

 
    <li class="item" style="background: red"> 
 
     <p class="category">Red</p> 
 
     <p class="price">37</p> 
 
    </li> 
 

 
    <li class="item" style="background: blue"> 
 
     <p class="category">Blue</p> 
 
     <p class="price">22</p> 
 
    </li> 
 

 
    <li class="item" style="background: blue"> 
 
     <p class="category">Blue</p> 
 
     <p class="price">58</p> 
 
    </li> 
 

 
    <li class="item" style="background: red"> 
 
     <p class="category">Red</p> 
 
     <p class="price">45</p> 
 
    </li> 
 
    </ul> 
 
</div>