我正在嘗試為我們公司的建筑商創建一個簡單的門戶，以便他們可以訪問有關商店內產品的安全/供應商資訊。我的想法是列出產品（每個鏈接到自己的頁面），并根據頂部搜索欄中輸入的內容讓它們出現在網頁上。它由一個小表單組成，它只是一個選擇/下拉串列、文本框和提交按鈕。有九個類別可供選擇，但我希望可以訪問一個文本框以獲得更具體的結果。因此，使用值是一回事，使用關鍵字是另一回事。
這是一個示例，說明如果提交了所有類別，我希望它看起來如何。（一切都顯示出來了。） 預覽 它們最初會被 css 隱藏（顯示：無）。
這是我對代碼的第一次嘗試，但我停止了，因為我不知道自己在做什么。
$("#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>
因此，我目前已將其設定為在選擇下拉串列中每個類別都有一個專案，但我尚未建立關鍵字。那么，我需要做些什么才能使它成為一個功能串列，根據這些人輸入的內容隱藏和顯示這些專案？
我擅長 html 和 css，但在 javascript 和 jQuery 方面我真的很笨。我不太明白。請描述任何代碼的作用或用途。我真的被困住了。請和謝謝。
uj5u.com熱心網友回復：
請嘗試以下代碼
$(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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/422458.html
標籤：