Hide/Show 列出带有表单下拉列表和文本的项目

Question

我正在尝试为我们公司的建筑商制作一个简单的门户，以便他们可以访问 safety/supplier 有关商店内产品的信息。我的想法是有一个产品列表（每个链接到他们自己的页面）并根据顶部搜索栏中输入的内容让它们出现在网页上。它由一个小表单组成，只有一个 select/dropdown、文本框和提交按钮。有九个类别可供选择，但我希望可以访问一个文本框以获得更具体的结果。所以，使用值是一回事，利用关键字是另一回事。

这是一个示例，说明如果提交了所有类别，我希望它看起来如何。（一切都出现了。） Preview 它们最初会被 css 隐藏（显示：none）。

这是我第一次尝试使用代码，但我停止了，因为我不知道我在做什么。

$("#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 class="products">
<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>

因此，我目前已将其设置为 select- 下拉列表中的每个类别都有一个项目，但我还没有建立关键字。那么，我需要做什么才能使它成为一个功能列表，根据人们输入的内容隐藏和显示这些项目？

我擅长html和css，但是javascript和jQuery我真的很笨。我不太明白。 请描述任何代码的作用或用途。我真的被困住了。请和谢谢。

Answer 1

请尝试以下代码

$(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 class="products">
  <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>

Hide/Show 列出带有表单下拉列表和文本的项目

Hide/Show List Items with Form Dropdown and Text

javascript

forms

jquery

keyword

html-lists