很多剛學習前端的小伙伴想做一個搜索頁面，一看要做后端又要數(shù)據(jù)庫的可能就放棄了，這里給大家?guī)硪粋€不需要數(shù)據(jù)庫的，也可以使用的搜索功能頁面。網(wǎng)頁包含了3個功能：搜索框，類別選項，價格進度條。
搜索框是實時搜索的，而且做了不區(qū)分英語大小寫，也支持中文搜索。
?使用類別選項，篩選相應類別的手表。
?拉動價值進度條篩選相應價格的手表。
?filter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./filter.css"/>
<title>Filter Project</title>
</head>
<body>
<div class="container">
<div class="leftMenu">
<input type="text" placeholder="Search..." class="search" />
<h1>Categories</h1>
<div class="cats">
</div>
<h1>Maximum Price</h1>
<div class="price">
<input type="range" class="priceRange" />
<span class="priceValue"></span>
</div>
</div>
<div class="content">
<div class="products">
<div class="product">
<img
src="https://m.media-amazon.com/images/I/71e04Q53xlL._AC_UY879_.jpg"
alt=""
/>
<span class="name">name</span>
<span class="priceText">$44</span>
</div>
</div>
</div>
</div>
<script src="./filter.js"></script>
</body>
</html>filter.css文章來源：http://www.zghlxwxcb.cn/news/detail-502925.html
body{
}
.container{
display: flex;
padding: 50px;
}
.leftMenu{
flex: 1;
}
.search{
padding: 10px;
width: 200px;
border: 1px solid gray;
}
h1{
font-size: 30px;
color: #555;
font-weight: 300;
}
.cat{
display: flex;
flex-direction: column;
gap: 10px;
}
.cat{
cursor: pointer;
font-size: 20px;
font-weight: 300;
padding: 5px;
}
.content{
flex: 4;
}
.products{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.product{
width: 350px;
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
}
img{
width: 150px;
height: 250px;
object-fit: contain;
}
.name{
font-weight: 300;
}filter.js文章來源地址http://www.zghlxwxcb.cn/news/detail-502925.html
const data = [
{
id: 1,
name: "Invicta Men's Pro Diver",
img: "https://m.media-amazon.com/images/I/71e04Q53xlL._AC_UY879_.jpg",
price: 74,
cat: "Dress",
},
{
id: 2,
name: "Timex Men's Expedition Scout",
img: "https://m.media-amazon.com/images/I/91WvnZ1g40L._AC_UY879_.jpg",
price: 62,
cat: "Dress",
},
{
id: 3,
name: "Breitling Superocean Heritage",
img: "https://m.media-amazon.com/images/I/61hGDiWBU8L._AC_UY879_.jpg",
price: 40,
cat: "Casual",
},
{
id: 4,
name: "Casio Classic Resin Strap",
img: "https://m.media-amazon.com/images/I/51Nk5SEBARL._AC_UY879_.jpg",
price: 200,
cat: "Sport",
},
{
id: 5,
name: "Garmin Venu Smartwatch",
img: "https://m.media-amazon.com/images/I/51kyjYuOZhL._AC_UY879_.jpg",
price: 16,
cat: "Luxury",
},
];
const productsContainer = document.querySelector(".products")
const searchInput = document.querySelector(".search")
const categoriesContainer = document.querySelector(".cats")
const priceRange = document.querySelector(".priceRange")
const priceValue = document.querySelector(".priceValue")
const displayProducts = (filteredProducts) =>{
productsContainer.innerHTML = filteredProducts.map(product=>
`
<div class="product">
<img
src=${product.img}
alt=""
/>
<span class="name">${product.name}</span>
<span class="priceText">$${product.price}</span>
</div>
`
).join("");
};
displayProducts(data);
searchInput.addEventListener("keyup",(e) => {
const value = e.target.value.toLowerCase();
if(value){
displayProducts(data.filter(item=> item.name.toLowerCase().indexOf(value) != -1))
}else{
displayProducts(data);
}
});
const setCategories = () => {
const allCats = data.map((item) => item.cat)
const categories = ["All",
...allCats.filter((item,i) => {
return allCats.indexOf(item)===i
})
];
categoriesContainer.innerHTML = categories.map(cat=>
`
<span class="cat">${cat}</span>
`
).join("");
categoriesContainer.addEventListener("click",(e)=>{
const selectedCat = e.target.textContent;
selectedCat === "All" ? displayProducts(data) : displayProducts(data.filter(item=>
item.cat === selectedCat));
});
};
const setPrices = ()=>{
const priceList = data.map((item) => item.price);
const minPrice = Math.min(...priceList)
const maxPrice = Math.max(...priceList)
priceRange.min = minPrice
priceRange.max = maxPrice
priceRange.value = maxPrice
priceValue.textContent = "$" + maxPrice
priceRange.addEventListener("input",(e)=>{
priceValue.textContent = "$" + e.target.value;
displayProducts(data.filter((item) => item.price <= e.target.value));
});
};
setCategories();
setPrices();到了這里，關(guān)于JS實現(xiàn)搜索功能頁面（可搜索，無需數(shù)據(jù)庫，無后端）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
