0

Using similar functionality as the table search at w3schools, I'm getting an error that the function used for the onkeyup is not defined on the input element. The name of the function is the same, so this shouldn't be an issue.

HTML

<div class="row">
<div class="container form-container">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 search-form">

<input type="text" id="search" onkeyup="tableSearch()" placeholder="Search for names.." title="Search by Name, Practice Area or Location">
      </div>
</div>

<div class="results">
  <div class="col-lg-12">
    <div id="no-more-tables">
        <table id="results" class="order-table col-md-12 cf">
            <thead class="cf">
                <tr>
                    <th class="numeric">field 1</th>
                    <th class="numeric">field 2</th>
                    <th class="numeric">field 3</th>
                    <th class="numeric">field 4</th>
                    <th class="numeric">field 5</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td data-title="" class="name"><a href="user-1">User 1</a><a href="tel:(407) 420-1414"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user1@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td>
                    <td data-title="location"></td>
                    <td data-title="practice area" class=""></td>
                    <td data-title="email" class="numeric desktop-only"><a href="mailto:user1@site.com">user1@site.com</a></td>
            <td data-title="phone" class="numeric desktop-only"><a href="tel:(111) 111-1111">(111) 111-1111</a></td>
                </tr>

                <tr>
                    <td data-title="" class="name"><a href="user-2">User 2</a><a href="tel:1111111111"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user2@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td>
                    <td data-title="location"></td>
                    <td data-title="practice area" class=""></td>
                    <td data-title="email" class="numeric desktop-only"><a href="mailto:user2@site.com">user2@site.com</a></td>
            <td data-title="phone" class="numeric desktop-only"><a href="tel:1111111111">1111111111</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</div>

JavaScript

function tableSearch() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("results");
  tr = table.getElementsByTagName("tr");


  for (i = 0; i < tr.length; i++) {

    tds = tr[i].getElementsByTagName("td");
    var found = false;
    //---second loop that goes over all tds in a tr ---can be modified as required to go over only certain tds
    for (j = 0; j < tds.length; j++) {
      td = tds[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          found = true;
          break;
        }
      }
    }

    if (found)
      tr[i].style.display = "";
    else
      tr[i].style.display = "none";

  }
}

JSFIDDLE: LINK

Matt
  • 1,561
  • 5
  • 26
  • 61

2 Answers2

0

Your method tableSearch is in onload Load-Type in your fiddle's Javascript Options, hence it is not in a global scope.

Check the updated fiddle's Javascript options. I have selected 'Wrap in head' to put it in global scope so that it is accessible from an event handler.

gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • I see. The other issue is that the table headers disappear on search, though they should be staying visible, as they do in the w3schools version. – Matt Apr 07 '17 at 14:48
-1

maybe you can use the jquery library 

$( "#search" ).keypress(function() {
  tableSearch();
});
Rex
  • 137
  • 2
  • 12