Passing values from one page to another and using value to filter table

Question

I am currently passing one value from search.php to filtering.php. I am using $_GET to accomplish that. In the filtering.php page I have a table that auto filters based on a word typed in the input text box. I am passing the value in the URL like: http://holaweblearning.co.nf/php_learning/filtering.php?key=Dragoo. Then the value from the URL is taken and placed in the input text box. But nothing gets filtered unless I click on the text box and press a key. How can I pass a value to the filtering.php page and get result based on the word? DEMO

I am using the footable filtering method

Search.php

<div>
  <input type="text" class="search" placeholder="Type 'Dragoo' ">
</div>
<div>
  <a href="#" class="search_word">Search</a>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.search').bind('change keyup', function() {
    var dInput = this.value;
    console.log(dInput);
    url='http://holaweblearning.co.nf/php_learning/filtering.php?key='+dInput;
    $('.search_word').attr('href', url);
});
</script>

filtering.php

<?php
    $keyword = $_GET['key'];
 ?>

Search: <input id="filter" type="text" value="<?php echo $keyword; ?>"/>

Answer 1

You could look through the event listeners and come to the conclusion that the 'keyup' event is responsible for populating the field. Do something like this when the page loads:

$('input#filter').trigger('keyup')