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: