Navigating on Blogger can be a tricky task when it comes to searching and

Question

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data.

After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements.

Here is my question:

How can I make the Table visible only when the user clicks the "Enter Key" on the input/button form?
Additionally, how can I hide the Table automatically if the Input Form is empty?

javascript html css blogger

Answer 1

Answer №1

This feature enables search functionality only upon "Enter Key" press in the input field.
The table automatically hides when the search text is cleared.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">


<table id="myTable" style="display:none;">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
var input = document.getElementById("myInput");

input.addEventListener("keyup", function(event) {

input = document.getElementById("myInput");
  if(input.value.length <1){
    document.getElementById("myTable").style.display = 'none';
        return;
    }
 else if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();    
    myFunction();
    }
});

function myFunction() {

  var input, filter, table, tr, td, i, txtValue;
  
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); 
  table = document.getElementById("myTable");  
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  document.getElementById("myTable").style.display = 'block';
}
</script>

</body>
</html>

Answer 2

This feature enables search functionality only upon "Enter Key" press in the input field.
The table automatically hides when the search text is cleared.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">


<table id="myTable" style="display:none;">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
var input = document.getElementById("myInput");

input.addEventListener("keyup", function(event) {

input = document.getElementById("myInput");
  if(input.value.length <1){
    document.getElementById("myTable").style.display = 'none';
        return;
    }
 else if (event.keyCode === 13) {
    // Cancel the default action, if needed
    event.preventDefault();    
    myFunction();
    }
});

function myFunction() {

  var input, filter, table, tr, td, i, txtValue;
  
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); 
  table = document.getElementById("myTable");  
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
  document.getElementById("myTable").style.display = 'block';
}
</script>

</body>
</html>

Answer 3

Answer №2

Check out the code snippet below for a potential solution to your problem.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <style>
    * {
      box-sizing: border-box;
    }

    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
    }

    #myTable th,
    #myTable td {
      text-align: left;
      padding: 12px;
    }

    #myTable tr {
      border-bottom: 1px solid #ddd;
    }

    #myTable tr.header,
    #myTable tr:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>

<body>

  <h2>My Customers</h2>

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

  <table id="myTable">
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
   <!-- Remaining table rows with customer data -->
  
  </table>

  <style>
    #myTable {
      display: none;
    }

    #myTable.hide {
      display: table;
    }
  </style>

  <script>
    <!-- JavaScript function for filtering table based on input value -->
  </script>

</body>

</html>

Answer 4

Check out the code snippet below for a potential solution to your problem.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <style>
    * {
      box-sizing: border-box;
    }

    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }

    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
    }

    #myTable th,
    #myTable td {
      text-align: left;
      padding: 12px;
    }

    #myTable tr {
      border-bottom: 1px solid #ddd;
    }

    #myTable tr.header,
    #myTable tr:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>

<body>

  <h2>My Customers</h2>

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

  <table id="myTable">
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
   <!-- Remaining table rows with customer data -->
  
  </table>

  <style>
    #myTable {
      display: none;
    }

    #myTable.hide {
      display: table;
    }
  </style>

  <script>
    <!-- JavaScript function for filtering table based on input value -->
  </script>

</body>

</html>

Navigating on Blogger can be a tricky task when it comes to searching and

Answer №1

Answer №2

Similar questions

Is it possible for a div with fixed position to still have scrolling functionality

An issue arises in the NodeJS Express authentication process when attempting to set headers after they have already been sent,

Error encountered in Angular $injector:unpr while attempting to initialize uibModal

The CSS file cannot be found on the live XAMPP server

- Determine if a div element is already using the Tooltipster plugin

Overlapping Bootstrap cards conundrum

Outputting a variable using javascript

React - Clearing State data retrieved from axios request

Retrieve object containing all identical fields except for one specific field

What could be the reason for scrapy not returning any URLs?

Modifying the data attribute within the div does not result in a different image for the 360-degree spin view

Having trouble updating the icon on my website using FontAwsome

Encountering issues with integrating Sass into Angular 4

The infinite loop issue arises when the useEffect is utilizing the useNavigate hook

Undefined data is frequently encountered when working with Node.js, Express, and Mongoose

The function screen.getByText is not available in this context

Update the form field with today's date in a JHipster application

Customize the text color of select list options in Angular 5

Unable to execute a basic opacity transition on a div element

Transferring information to modal without using AngularUI