Hide/Show List Items with Form Dropdown and Text-CodePudding

I'm trying to make a simple portal for the builders at our company so they can access safety/supplier info about the products inside the shop. My idea is to have a list of the products (each linking to their own pages) and have them appear on the webpage depending what's entered in the search bar on top. It consists of a small form, which is just a select/dropdown, textbox and submit button. There is nine categories to choose from, but I want a textbox to be accessible for more specific results. So, using values is one thing and utilizing keywords is another.

This is an example of how I want it to look if All Categories is submitted. (Everything shows up.) Preview They'll initially be hidden with css (display:none).

This is my first attempt with the code, but I stopped because I have no idea what I'm doing.

$("#category").on("submit", function() {
    $("#"   $(this).val()).show().siblings().hide();
})
</script>
</head>

<body>
<style>
ul {
    list-style-type: none;
}

.products li {
    display: none;
}
</style>

<form>
<select name="category" id="category">
    <option value="" selected="selected">All Categories</option>
    <option value="ab">Abrasives</option>
    <option value="ag">Adhesives, Glues, Sealants</option>
    <option value="c">Cleaners, Solvents, Polishes</option>
    <option value="f">Fillers, Putties</option>
    <option value="l">Lubricants</option>
    <option value="m">Miscellaneous</option>
    <option value="p">Paints, Stains, Finishes</option>
    <option value="s">Surfacing Materials</option>
    <option value="w">Wood Products</option>
</select>
<input name="keywords" type="text">
<input name="submit" type="submit" value="submit">
</form>

<div >
<ul>
<li id="c"><a href="clorox-bleach.html">Clorox Bleach</a></li>
<li id="l"><a href="crc-drylube-03044.html">CRC Dry Lube 03044</a></li>
<li id="ab"><a href="emerald_film_disks.html">Emerald Film Disks</a></li>
<li id="w"><a href="industrial_partical_board-P11164997.html">Industrial Partical Board</a></li>
<li id="c"><a href="lacquer_thinner-k119.html">Lacquer Thinner K119</a></li>
<li id="m"><a href="lemyn-hs.html">LEMYN Hand Sanitizer</a></li>
<li id="s"><a href="lx.html">LX Hi-Macs</a></li>
<li id="p"><a href="milesi-KKR1.html">Milesi Top Coat KKR1</a></li>
<li id="ag"><a href="nuflex302.html">Nuflex Silicone Sealant 302</a></li>
</ul>
</div>

</body>

So, I currently have it set-up so that there's one item of each category in the select-dropdown, but I haven't established keywords yet. So, what do I need to do to make this a functional list that hides and shows these items depending on what the guys enter?

I'm good at html and css, but I'm really dumb when it comes to javascript and jQuery. I don't understand it very well. Please be descriptive as to what any code does or is for. I'm really stuck. Please and thanks.

CodePudding user response：

Kindly try below code

$(document).ready(function() {
  $("#search-form").on("submit", function(event) {
    event.preventDefault(); // prevent the form from making a server side submission

    var selectedCategory = $('[name="category"]').val(); // get the selected category
    var Enteredkeyword = $('[name="keywords"]').val().trim().toLowerCase(); // get entered keyword

    // iterate over products, show the ones that match the selected category and/or entered keyword
    // and hide the rest
    $('.products li').each(function() {
      let itemCategory = $(this).data('category'); // product's category
      let itemText = $(this).text().trim().toLowerCase(); // product's name

      if ((selectedCategory !== '' && itemCategory == selectedCategory) ||
        (Enteredkeyword !== '' && itemText.indexOf(Enteredkeyword) !== -1)
      ) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  })
})

ul {
  list-style-type: none;
}

.products li {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- add an id to the form for easy selection -->
<form id="search-form">
  <select name="category" id="category">
    <option value="" selected="selected">All Categories</option>
    <option value="ab">Abrasives</option>
    <option value="ag">Adhesives, Glues, Sealants</option>
    <option value="c">Cleaners, Solvents, Polishes</option>
    <option value="f">Fillers, Putties</option>
    <option value="l">Lubricants</option>
    <option value="m">Miscellaneous</option>
    <option value="p">Paints, Stains, Finishes</option>
    <option value="s">Surfacing Materials</option>
    <option value="w">Wood Products</option>
  </select>
  <input name="keywords" type="text">
  <input name="submit" type="submit" value="submit">
</form>

<!-- change the id property to data-category since id might not be unique on the page -->
<div >
  <ul>
    <li data-category="c"><a href="clorox-bleach.html">Clorox Bleach</a></li>
    <li data-category="l"><a href="crc-drylube-03044.html">CRC Dry Lube 03044</a></li>
    <li data-category="ab"><a href="emerald_film_disks.html">Emerald Film Disks</a></li>
    <li data-category="w"><a href="industrial_partical_board-P11164997.html">Industrial Partical Board</a></li>
    <li data-category="c"><a href="lacquer_thinner-k119.html">Lacquer Thinner K119</a></li>
    <li data-category="m"><a href="lemyn-hs.html">LEMYN Hand Sanitizer</a></li>
    <li data-category="s"><a href="lx.html">LX Hi-Macs</a></li>
    <li data-category="p"><a href="milesi-KKR1.html">Milesi Top Coat KKR1</a></li>
    <li data-category="ag"><a href="nuflex302.html">Nuflex Silicone Sealant 302</a></li>
  </ul>
</div>