JS实现搜索功能页面（可搜索，无需数据库，无后端）

最新推荐文章于 2024-05-13 09:30:43 发布

xiaobuzq

最新推荐文章于 2024-05-13 09:30:43 发布

阅读量3.2k

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xiaobuzq/article/details/128649040

版权

很多刚学习前端的小伙伴想做一个搜索页面，一看要做后端又要数据库的可能就放弃了，这里给大家带来一个不需要数据库的，也可以使用的搜索功能页面。网页包含了3个功能：搜索框，类别选项，价格进度条。

搜索框是实时搜索的，而且做了不区分英语大小写，也支持中文搜索。

使用类别选项，筛选相应类别的手表。

拉动价值进度条筛选相应价格的手表。

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

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

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();