JavaScript to achieve product query function
|
This article example shares the specific code of javascript to realize the product query function for your reference. The specific content is as follows This is the main interface without clicking query
This is after clicking on the name query
Search by price
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript query function</title>
<style>
body{
font-family: "Microsoft YaHei";
font-size: 18px;
}
table {
width: 800px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,th {
border: 1px solid #000;
text-align: center;
}
input {
width: 70px;
}
.search {
width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="search">
Search by price: <input type="text" class="start"> - <input type="text" class="end">
<button class="search-price">Search</button>
<br><br>
Search by product name: <input type="text" class="product">
<button class="search-pro">Search</button>
</div>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Processor</th>
<th>Screen</th>
<th >Camera</th>
<th>Battery</th>
<th >Features</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// Use the new array method to operate data var data = [
{
pname: 'Huawei mateX2',
price: 17999,
processor:'Kirin 9000',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei mate40Pro',
price: 6599,
processor:'Kirin 9000',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei mate40',
price: 4999,
processor:'Kirin 9000E',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei mate30Pro',
price: 5499,
processor:'Kirin 990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei mate30',
price: 3599,
processor:'Kirin 990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei P40Pro',
price: 7999,
processor:'Kirin 990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei P40',
price: 3999,
processor:'Kirin 990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Honor 30 Pro',
price: 3999,
processor:'Kirin 990',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Huawei mate20Pro',
price: 1599,
processor:'Kirin 980',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Xiaomi 11Pro',
price: 4799,
processor:'Qualcomm Snapdragon 888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Xiaomi 11',
price: 3799,
processor:'Qualcomm Snapdragon 888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Xiaomi Mix4',
price: 5499,
processor:'Qualcomm Snapdragon 888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Redmi K40Pro',
price: 2999,
processor:'Qualcomm Snapdragon 888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'Redmi K40',
price: 1999,
processor:'Qualcomm Snapdragon 870',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'VivoX60Pro',
price: 5499,
processor:'Qualcomm Snapdragon 888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'VivoX60',
price: 3499,
processor:'Orion',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
{
pname: 'OPPOReno6Pro',
price: '',
processor:'Qualcomm Snapdragon 888',
screen:'',
camera:'',
Battery:'',
CharacteristicFunction:'',
},
];
// 1. Define and get elements var tbody = document.querySelector('tbody');/*Define tbody*/
var search_price = document.querySelector('.search-price');/*define search-price*/
var processor = document.querySelector('.processor');/*define processor*/
var screen = document.querySelector ('.screen'); /* define screen */
var camera = document.querySelector ('.camera'); /* define camera */
var Battery = document.querySelector ('.Battery'); /* define battery */
var CharacteristicFunction = document.querySelector ('.CharacteristicFunction'); /* Characteristic function */
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var product = document.querySelector('.product');
setDate(data);
// 2. Render the data to the page function setDate(mydata) {
// Clear the data in the original tbody first tbody.innerHTML = '';
mydata.forEach(function(value) { /* add */
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.pname + '</td><td>'
+ value.price+'</td><td>'
+ value.processor+'</td><td>'
+ value.screen+'</td><td>'
+ value.camera+'</td><td>'
+ value.Battery+'</td><td>'
+ value.CharacteristicFunction+'</td>'
;
tbody.appendChild(tr);
});
}
// 3. Query products by price // Click the button to filter the objects in the array according to the product price search_price.addEventListener('click', function() {
var newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
});
console.log(newDate);
// Render the filtered objects to the page setDate(newDate);
});
// 4. Fuzzy search ---- Search for products by product name Fuzzy search product.addEventListener('keyup', function() {
// Render the obtained data to the page var result = data.filter(function(value) {
if (value.pname.includes(product.value)) {
return value
}
})
setDate(result);
setDate(data.filter(function(value) {
if (value.pname.includes(product.value)) {
return value
}
}));
})
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of the principles and usage of MySQL data types and field attributes
>>: Vue implements form data validation example code
Recommend
Notes on using the blockquote tag
<br />Semanticization cannot be explained in...
Windows 10 and MySQL 5.5 installation and use without installation detailed tutorial (picture and text)
This article introduces the installation and use ...
Example code for implementing image adaptive container with CSS
There is often a scenario where the image needs t...
202 Free High Quality XHTML Templates (2)
Following the previous article 202 Free High-Qual...
CSS Standard: vertical-align property
<br />Original text: http://www.mikkolee.com...
CSS3 Tab animation example background switching dynamic effect
CSS 3 animation example - dynamic effect of Tab b...
How to install Docker on Windows Server 2016
Recently Microsoft released Windows Server 2016, ...
Detailed deployment of Alibaba Cloud Server (graphic tutorial)
I have recently learned web development front-end...
Detailed explanation of where the images pulled by docker are stored
The commands pulled by docker are stored in the /...
Detailed explanation of the principle of distributed locks and three implementation methods
Currently, almost all large websites and applicat...
Linux beginners in virtual machines configure IP and restart the network
For those who are new to virtual machines or have...
Is it easy to encapsulate a pop-up component using Vue3?
Table of contents Summary put first: 🌲🌲 Preface: ...
How to implement Echats chart large screen adaptation
Table of contents describe accomplish The project...
How to make select support readonly when the background cannot read data when the disabled attribute is set
Copy code The code is as follows: <span style=...
MYSQL database basics - Join operation principle
Join uses the Nested-Loop Join algorithm. There a...