javascript - 列出所有产品

Question

我的网站中有一个产品部分。有搜索按钮，您可以按产品类型进行搜索。我的问题是它在加载页面时列出了所有产品。我想做的是，当您加载页面时，我根本不想列出任何产品。我想在您选择产品类型或搜索特定产品时列出产品。

请大家帮帮我

var data = [
    //create Masterbatch-Colored Masterbatches cards
	{
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PE Masterbatch",
        "manufacturer": "HECHEM",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},	
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PP Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
        
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PS Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "ABS Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PA Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PC Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PMMA Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PBT Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PET Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PES Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PVC Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "EVA Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "TPU Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	},
    {
		"make": "Masterbatch",
		"model": "Colored Masterbatches",
		"type": "PLA Masterbatch",
        "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
		"image": "http://eukim.com/doc/no_img.png"
	}
    
];

var products = "",
	makes = "",
	models = "",
	types = "";

for (var i = 0; i < data.length; i++) {
	var make = data[i].make,
		model = data[i].model,
		type = data[i].type,
        manufacturer = data[i].manufacturer,
        characteristic = data[i].characteristic,
        description = data[i].description,
		image = data[i].image;
	
	//create product cards
	products += "<div class='col-sm-4 product' data-make='" + make + "' data-model='" + model + "' data-type='" + type + "'><div class='product-inner text-center'><img src='" + image + "'><br /><div class='sol'><strong>Main Product Type&nbsp;:</strong> " + make + "<br /><strong>Product Type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + model + "<br /><strong>Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + type + "<br /><strong>Manufacturer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + manufacturer + "<br /><strong>Characteristic&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + characteristic + "<br /><strong>Description&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + description+ "</div></div></div>";
	
	//create dropdown of makes
	if (makes.indexOf("<option value='" + make + "'>" + make + "</option>") == -1) {
		makes += "<option value='" + make + "'>" + make + "</option>";
	}
	
	//create dropdown of models
	if (models.indexOf("<option value='" + model+"'>" + model + "</option>") == -1) {
		models += "<option value='" + model + "'>" + model + "</option>";
	}
	
	//create dropdown of types
	if (types.indexOf("<option value='" + type + "'>" + type + "</option>") == -1) {
		types += "<option value='" + type + "'>" + type + "</option>";
	}
}

$("#products").html(products);
$(".filter-make").append(makes);
$(".filter-model").append(models);
$(".filter-type").append(types);

var filtersObject = {};

//on filter change
$(".filter").on("change",function() {
	var filterName = $(this).data("filter"),
		filterVal = $(this).val();
	
	if (filterVal == "") {
		delete filtersObject[filterName];
	} else {
		filtersObject[filterName] = filterVal;
	}
	
	var filters = "";
	
	for (var key in filtersObject) {
	  	if (filtersObject.hasOwnProperty(key)) {
			filters += "[data-"+key+"='"+filtersObject[key]+"']";
	 	}
	}
	
	if (filters == "") {
		$(".product").show();
	} else {
		$(".product").hide();
		$(".product").hide().filter(filters).show();
	}
});

//on search form submit
$("#search-form").submit(function(e) {
	e.preventDefault();
	var query = $("#search-form input").val().toLowerCase();

	$(".product").hide();
	$(".product").each(function() {
		var make = $(this).data("make").toLowerCase(),
			model = $(this).data("model").toLowerCase(),
			type = $(this).data("type").toLowerCase();

		if (make.indexOf(query) > -1 || model.indexOf(query) > -1 || type.indexOf(query) > -1) {
			$(this).show();
		}
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="http://eukim.com/doc/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://eukim.com/doc/filter.css"> 
    </head>
    
    <body>
<div class="container">
	<div class="row" id="search">
		<form id="search-form" action="" method="POST" enctype="multipart/form-data">
			<div class="form-group col-xs-9">
				<input class="form-control" type="text" placeholder="Search" />
			</div>
			<div class="form-group col-xs-3">
				<button type="submit" class="btn btn-block btn-primary">Search</button>
			</div>
		</form>
	</div>
	<div class="row" id="filter">
		<form>
			<div class="form-group col-sm-3 col-xs-6">
				<select data-filter="make" class="filter-make filter form-control">
					<option value="">Select Main Product Type</option>
					<option value="">Show All</option>
				</select>
			</div>
			<div class="form-group col-sm-3 col-xs-6">
				<select data-filter="model" class="filter-model filter form-control">
					<option value="">Select Product Type</option>
					<option value="">Show All</option>
				</select>
			</div>
			<div class="form-group col-sm-3 col-xs-6">
				<select data-filter="type" class="filter-type filter form-control">
					<option value="">Select Type</option>
					<option value="">Show All</option>
				</select>
			</div>

		</form>
	</div>
	<div class="row" id="products">
		
	</div>
</div>

<script src="http://eukim.com/doc/bootstrap.min.js"></script>
<script src="http://eukim.com/doc/jquery.min.js"></script>
<script src="http://eukim.com/doc/products.js"></script>


</body>



</html>

Answer 1

我同意上面的评论，您应该尝试使用后端数据库(或至少一个 JSON 文件)，然后根据需要从中获取数据。

但是，如果您想要快速修复，那就是这样(只需在创建 Div 时添加 style='display: none;' 即可)- https://jsfiddle.net/pqjd2h5a/3/

//create product cards
products += "<div style='display: none;' class='col-sm-4 product' data-make='" + make + "' data-model='" + model + "' data-type='" + type + "'><div class='product-inner text-center'><img src='" + image + "'><br /><div class='sol'><strong>Main Product Type&nbsp;:</strong> " + make + "<br /><strong>Product Type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + model + "<br /><strong>Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + type + "<br /><strong>Manufacturer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + manufacturer + "<br /><strong>Characteristic&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + characteristic + "<br /><strong>Description&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</strong> " + description+ "</div></div></div>";