基于jQuery的产品搜索表单：多条件关联筛选、搜索触发按钮及价格排序功能开发求助

Alright, let's fix up your product filtering and sorting functionality to meet all three of your requirements. I've restructured the code to make the filters work together, added a dedicated search button, and included a price-sorting dropdown. Here's the breakdown and complete working code:

Key Improvements: #

• Linked Dual Filters: Now both the name/sku and location filters work in tandem—only products that match both criteria will be displayed.
• Search Button Trigger: Replaced real-time input filtering with a button click, so filters apply only when the user decides to search.
• Price Sorting Dropdown: Added a dropdown to sort products by price from low to high (with an option to reset to the original order).

Complete Code #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
    <input type="text" id="search-location" class="form-control" placeholder="Search product by location">
    <!-- Added Search Button -->
    <button id="search-btn" class="btn btn-primary mt-2">Search</button>
    <!-- Added Price Sort Dropdown -->
    <select id="sort-price" class="form-control mt-2">
      <option value="">Sort by Price</option>
      <option value="asc">Low to High</option>
    </select>
  </div>
</div>
<hr>
<div class="row" id="parent">
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Pepsi </p>
      <p class="sku">D-1251</p>
      <p class="price">$ 2,410</p>
      <p class="location">east</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Cocacola </p>
      <p class="sku">D-1314</p>
      <p class="price">$ 2,410</p>
      <p class="location">north</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Mountien Dwe </p>
      <p class="sku">D-458</p>
      <p class="price">$ 2,410</p>
      <p class="location">north</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Burger </p>
      <p class="sku">F-125</p>
      <p class="price">$ 2,410</p>
      <p class="location">north</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Hot Dog </p>
      <p class="sku">F-7412</p>
      <p class="price">$ 2,410</p>
      <p class="location">south</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Hot Dog 2</p>
      <p class="sku">F-74122</p>
      <p class="price">$ 24,105</p>
      <p class="location">east</p>
    </center>
  </div>
  <div class="col-md-2 box location-box food">
    <center>
      <img src="http://via.placeholder.com/80x80" alt="">
      <p class="name">Hot Dog 2233</p>
      <p class="sku">F-74112</p>
      <p class="price">$ 24,103</p>
      <p class="location">north</p>
    </center>
  </div>
</div>

<script>
$(document).ready(function() {
  // Keep original category button logic intact
  var $btns = $('.btn').click(function() {
    if (this.id == 'all') {
      $('#parent > div').fadeIn(450);
    } else {
      var $el = $('.' + this.id).fadeIn(450);
      $('#parent > div').not($el).hide();
    }
    $btns.removeClass('active');
    $(this).addClass('active');
  });

  // Unified filter function to check both name/sku and location criteria
  function applyFilters() {
    $btns.removeClass('active');
    let nameSkuValue = $('#search').val().trim();
    let locationValue = $('#search-location').val().trim();

    $('.box').each(function() {
      let $box = $(this);
      let matchesNameSku = true;
      let matchesLocation = true;

      // Check name/sku filter only if input has content
      if (nameSkuValue) {
        matchesNameSku = new RegExp(nameSkuValue, 'gi').test($box.find('.name, .sku').text());
      }

      // Check location filter only if input has content
      if (locationValue) {
        matchesLocation = new RegExp(locationValue, 'gi').test($box.find('.location').text());
      }

      // Show the box only if both filters are satisfied
      $box.toggle(matchesNameSku && matchesLocation);
    });
  }

  // Trigger filters when search button is clicked
  $('#search-btn').click(applyFilters);

  // Price sorting logic
  $('#sort-price').change(function() {
    if ($(this).val() === 'asc') {
      // Convert price text to numeric value for accurate comparison
      let sortedBoxes = $('.box').sort(function(a, b) {
        let priceA = parseFloat($(a).find('.price').text().replace(/[^0-9.]/g, ''));
        let priceB = parseFloat($(b).find('.price').text().replace(/[^0-9.]/g, ''));
        return priceA - priceB;
      });
      // Reattach sorted elements to the parent container
      $('#parent').empty().append(sortedBoxes);
    } else {
      // Reset to original order (alternatively store original HTML on page load for smoother reset)
      location.reload();
    }
  });
});
</script>

Quick Notes: #

• I added a price class to all price elements to make targeting and sorting easier.
• The sorting function cleans up price text (removes $ and commas) to convert it to a numeric value for precise comparison.
• If you want a smoother reset instead of location.reload(), you can store the original HTML of the #parent div on page load and reinsert it when the dropdown is reset.

内容的提问来源于stack exchange，提问作者ZUH.