Getting function not defined on keyup of input element

Question

Given the following table (a slightly modified version of this one at w3schools) but searches all columns, I'm getting the error that searchAttorneys is not defined at HTMLInputElement.onkeyup when entering a value in the textbox. Also, how can I keep the table headers from disappearing when searching the table?

HTML

<input type="text" id="search-attorneys" onkeyup="searchAttorneys()" placeholder="Search for names.." title="Type in a name">

JS

function searchAttorneys() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("search-attorneys");
  filter = input.value.toUpperCase();
  table = document.getElementById("attorneys");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    tds = tr[i].getElementsByTagName("td");
    var found = false;
    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 if you have no document ready listener it needs to be assigned before call — TypedSource, Apr 16 '17 at 18:04
Possible duplicate of [Why does this simple JSFiddle not work?](https://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work) — Sebastian Simon, Mar 25 '18 at 19:12

score 1 · Accepted Answer · answered Apr 16 '17 at 18:10

HTML

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

Javascript

$(document).ready(function(){
  $('search-atorneys').on('keyup', function(){
    var input, filter, table, tr, td, i;
    input = document.getElementById("search-attorneys");
    filter = input.value.toUpperCase();
    table = document.getElementById("attorneys");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      tds = tr[i].getElementsByTagName("td");
      var found = false;
      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";
      }
    }
  });
});

execute from inside js and not from inside html is mostly the better way.

I've updated the fiddle, but the search isn't firing still: https://jsfiddle.net/1zg85s9s/4/ — Matt, Apr 16 '17 at 18:35
A little `#` would be welcome at: `$('search-atorneys').on(...` make it like: ``$('#search-atorneys').on(...`` as `search-atorneys` is `id` — fWd82, Mar 10 '18 at 17:13

score 0 · Answer 2 · answered Apr 16 '17 at 18:00

0

Set your jsfiddle javascript load type to nowrap (either one). The other 2 (onload/ondomready) will wrap the function inside another function, making it invisible to your inline onkeyup.

answered Apr 16 '17 at 18:00

yezzz

2,990
1
10
19

Got that fixed, but how do I keep the table headers from disappearing when typing: https://jsfiddle.net/1zg85s9s/2/ – Matt Apr 16 '17 at 18:02
https://jsfiddle.net/1zg85s9s/5/ search in tbody and not in the complete table. so the thead is not touched by the search – TypedSource Apr 16 '17 at 18:46

Getting function not defined on keyup of input element

2 Answers2