Javascript match/search table for results - total beginner

Question

I am admittedly very inexperienced, but I'm trying to enhance the workflow at my company. I'm using the code from here to create internal site to search for current part numbers. My employees are searching by description, but the javascript included in the example searches by exact input instead of individual words.

For example, using the example code on the site, I would like a search for "Trading Island" to return the same result as "Island Trading". I know this is possible, but can't figure out how to make it work.

<!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>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>
  <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 myFunction() {
  var input, filter, table, tr, td, i;
  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) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

</body>
</html>

Answer 1

When searching for word matches, it's best to place the search string into an array and the cell contents to be searched into an array.

Then you can easily use the Array.prototype.every() or the Array.prototype.some() methods to see if all or some of the search words are present in the cell.

See my comments inline below for additional details.

 // Get a reference to the input var searchElement = document.getElementById("myInput"); // Hook element up to event handler: searchElement.addEventListener("keyup", search); // Event handler: function search(){ // Now, break the search input into an array of words by splitting the string where // there are spaces (regular expression used here to locate the strings). // Also, note that strings are case-sensitive, so we are taking the input and // forcing it to lower case and we'll match by lower case later. var searchWords = searchElement.value.toLowerCase().split(/\\s+/); // Test to see the individual words //console.clear(); //console.log(searchWords); // Now you have to have some content to search against. // So, we'll get all the cells, which will be our data source: var theCells = document.querySelectorAll("td"); // Loop over each cell theCells.forEach(function(cell){ // Reset any previous cell matches cell.style.backgroundColor = "inherit"; // Get the words in the cell as an array (note: we are forcing lower // case again here to match lower case against lower case var cellWords = cell.textContent.toLowerCase().split(/\\s+/); // See if the cell contains all of the search words (You can substitute // "some" for "every" to just see if the cell contains some of the search words var result = cellWords.every(elem => searchWords.indexOf(elem) > -1); // every and some return a boolean letting you know if your 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 match/search table for results - total beginner

Question

1 answers

solution1
0 2016-12-12 21:36:19

Javascript match/search table for results - total beginner

Question

1 answers

solution1 0 2016-12-12 21:36:19

solution1
0 2016-12-12 21:36:19