1

I found this feature Filter/Search Table in W3schools from this link

https://www.w3schools.com/howto/howto_js_filter_table.asp

I had tried to use it in my wordpress page content. The problem here is onkeyup="myFunction()" disappear from page editor.

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

become

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

Anyone have solution to make it work? Thanks in advanced.

  • 1
    You should never put input tags and javascript directly into post content for security reasons, instead look into shortcodes, page templates, and embeds. Also, consider asking instead how to filter a table in post content – Tom J Nowell Dec 9 '19 at 14:12
  • I had put javascript on my header. But i try to put the table in the post so this post can have good page rank in google because of table's content. That's why i don't want use plugins. @TomJNowell – shirley Dec 9 '19 at 14:26
  • I didn't mention plugins, and using or not using plugins has no impact on Google, Google only sees the final result it has no idea how the page was generated, wether the code was in post content, inserted by a plugin, or in your theme – Tom J Nowell Dec 9 '19 at 16:02
  • Thank you @TomJNowell for information. That's great additional seo knowledge for me. – shirley Dec 9 '19 at 16:22
2

Welcome to the WordPress StackExchange! As Tom J Nowell mentioned in the question comments, when working with WordPress it would be more secure to implement javascript interactions via an external javascript file.

To do this, you'll need to complete three steps:

Create your JS file with the event that fires onkeyup:

(function (window, $) {

document.getElementById("myInput").addEventListener("keyup", myFunction);
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;

  input = this; //CHANGE THIS LINE. Assigning "this", which is your input, gives you access to the value, etc. 

  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";
      }
    }       
  }
}

})(window);

In the example above, you should use one or the other solution (vanilla JS or jQuery), not both.

Once you have your file inside your theme (for example, inside wp-content/themes/twentytwenty/js/your-custom-file.js), you will need to add it to your theme via wp_enqueue_script.

<?php
//Inside functions.php of your theme.
add_action('wp_enqueue_scripts', 'custom_enqueue_script');
function custom_enqueue_script(){
  wp_enqueue_script('custom-script', get_stylesheet_directory_uri().'/js/your-custom-file.js', array('jQuery'), false, true);
}

This will then add the custom JS file to your theme. I would recommend going through the additional links below to learn more about how WordPress handles JS files, but the above will get you started.

  • Hi @Tom, thanks for the information. I had created js file using vanilla JS and save it inside my theme folder /js/filter.js When adding this js to my theme, i had tried to use information inside link you give. Combined all enqued scripts in single function. link I add line under wp_engueue_style like this wp_enqueue_script('filter', get_stylesheet_directory_uri().'/js/filter.js', array('vanilla JS'), false, true); I tried the way you give too, both of them didn't work. Please give some clue. – shirley Dec 9 '19 at 16:19
  • Please try wp_enqueue_script('shirley-filter', get_stylesheet_directory_uri().'/js/filter.js', array(), false, true);. If possible, can you provide a link to the page that you are working on so I can take a look? – Tom Dec 9 '19 at 17:06
  • This is the link I har try that code but not working @Tom – shirley Dec 9 '19 at 17:35
  • @shirley See my updated answer. You will see that I changed input = this, which assigns the variable "input" with the <input> html object. Quick note: If you use Chrome, FireFox or Safari you can use the Developer Tools to debug Javascript. See this screenshot from Chrome Developer tools: dropbox.com/s/xnb4eiiieh68kys/… You'll see that it tells me what the issue is and what line it's on. Additional reading here: developers.google.com/web/tools/chrome-devtools – Tom Dec 9 '19 at 20:49
  • 1
    Thanks for help solve the problem – shirley Dec 10 '19 at 6:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.