Filter a list using min and max values

Question

Im using list.js and i've looked at the api which can be found here. I still can't figure out how to get my min and max price filters to only displays results if they fit between the two ranges.

This is what I have so far:

    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

First of all, you have to convert your input values to numbers. Then I used one event for your two inputs and used only one if statement with 2 conditions.

Generally if you want to filter your data with different conditions you have to use them in one place (for example you can add radio buttons for reds and blues and then when you change minPrice or maxPrice input you can check if proper radio input is checked and filter data considering price and category).

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>