JavaScript table search feature for novices - finding results

Question

JavaScript table search feature for novices - finding results

I am relatively new to this, but I am working on improving the workflow within my company. I found some code at this link in order to create an internal site for searching current part numbers. However, my employees are looking for parts based on descriptions, and the JavaScript provided only searches for exact matches rather than individual words.

For instance, with the existing code, a search for "Trading Island" should yield the same results as a search for "Island Trading." I know it's possible, but I'm struggling to implement it successfully.

<!DOCTYPE html>
<html>
<head>
<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>Customer Info</h2>

<input type="text" id="myInput" onkeyup="filterResults()" 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>
  <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>
function filterResults() {
  var input, filter, table, row, cell, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  row = table.getElementsByTagName("tr");
  for (i = 0; i < row.length; i++) {
    cell = row[i].getElementsByTagName("td")[0];
    if (cell) {
      if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
        row[i].style.display = "";
      } else {
        row[i].style.display = "none";
      }
    }       
  }
}
</script>

</body>
</html>

javascript search html-table match

Answer 1

Answer №1

For optimized word matching, it is advisable to store the search query in an array and break down the cell contents into another array.

You can then easily utilize either the Array.prototype.every() method or the Array.prototype.some() method to check if all or some of the search words are present in the cell content.

Refer to the included comments for further insights.

// Accessing the input field
var searchElement = document.getElementById("myInput");

// Attaching the element to an event handler:
searchElement.addEventListener("keyup", search);

// Event handler function:
function search(){

  // Breaking down the search input into an array of words by splitting at spaces using a regular expression.
  // Additionally, converting all strings to lowercase for case-insensitive matching.
  var searchWords = searchElement.value.toLowerCase().split(/\s+/);

  // Displaying individual search words
  //console.clear();
  //console.log(searchWords);

  // Creating an array of all cells which will serve as our data source:
  var theCells = document.querySelectorAll("td");

  // Iterating over each cell
  theCells.forEach(function(cell){
    // Resetting any previous matches
    cell.style.backgroundColor = "inherit";
    
    // Extracting words from the cell text as an array (converting to lowercase for matching)
    var cellWords = cell.textContent.toLowerCase().split(/\s+/);

    // Checking if the cell contains all search words (Use "some" instead of "every" to check if the cell has at least one search word)
    var result = cellWords.every(elem => searchWords.indexOf(elem) > -1);
    
    // The every and some methods return a boolean indicating if the condition was met:
    if(result){
      console.clear();
      console.log("Match found in: " + cell.textContent);
      cell.style.backgroundColor = "#ff0";
    }
  
  });
  
}

<input type="text" id="myInput" 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>
  <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>

Answer 2

For optimized word matching, it is advisable to store the search query in an array and break down the cell contents into another array.

You can then easily utilize either the Array.prototype.every() method or the Array.prototype.some() method to check if all or some of the search words are present in the cell content.

Refer to the included comments for further insights.

// Accessing the input field
var searchElement = document.getElementById("myInput");

// Attaching the element to an event handler:
searchElement.addEventListener("keyup", search);

// Event handler function:
function search(){

  // Breaking down the search input into an array of words by splitting at spaces using a regular expression.
  // Additionally, converting all strings to lowercase for case-insensitive matching.
  var searchWords = searchElement.value.toLowerCase().split(/\s+/);

  // Displaying individual search words
  //console.clear();
  //console.log(searchWords);

  // Creating an array of all cells which will serve as our data source:
  var theCells = document.querySelectorAll("td");

  // Iterating over each cell
  theCells.forEach(function(cell){
    // Resetting any previous matches
    cell.style.backgroundColor = "inherit";
    
    // Extracting words from the cell text as an array (converting to lowercase for matching)
    var cellWords = cell.textContent.toLowerCase().split(/\s+/);

    // Checking if the cell contains all search words (Use "some" instead of "every" to check if the cell has at least one search word)
    var result = cellWords.every(elem => searchWords.indexOf(elem) > -1);
    
    // The every and some methods return a boolean indicating if the condition was met:
    if(result){
      console.clear();
      console.log("Match found in: " + cell.textContent);
      cell.style.backgroundColor = "#ff0";
    }
  
  });
  
}

<input type="text" id="myInput" 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>
  <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>

JavaScript table search feature for novices - finding results

Answer №1

Similar questions

Is there a way to simultaneously apply the :active pseudoclass to multiple elements?

Move a 'square' to a different page and display it in a grid format after clicking a button

Activating a link without clicking will not trigger any javascript functions

Learn how to send information to a form and receive a response when a key is pressed, either up or down, by

Steps for iterating through an array within an object

The Autocomplete feature in Material UI is failing to function properly when paired with a

Convert HTML form input into a JSON file for safekeeping

The command 'create-react-app' is not valid and cannot be recognized as an internal or external command, operable program, or batch file

Fetching all data from a SQLite database in a Listview using React Native

The Ajax script is malfunctioning

show tab focus outline only

Tips for capturing changes in a "count" variable and executing actions based on its value

Steps for converting an HTML form into a sophisticated JavaScript object

Optimizing Wordpress by Efficiently Enqueueing Javascript

Is it possible for a MySQL loop to only delete the first entry?

Generate real-time dynamic line charts using data pulled directly from a MySQL database

Does ng-include fetch the included HTML files individually or merge them into a single HTML file before serving?

What is the best way to attach an attribute to a element created dynamically in Angular2+?

The switch switches on yet another switch

What is the order of reflection in dynamic classes - are they added to the beginning or