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.
