PHP+Ajax Passing input keyword for live search

Question

I already asked this, but I guess it was too abstract and all I got was suggestions to use DataTables plugin, however I want to do this live search manually.

I would like to know how can I pass a keyword (and how to create it for sending )from the input box to the findUser(); function with MySQL search query on every .keyup and refresh the shown content in #theContent.

Right now it correctly finds the people with ".com" because in users.ajax.php findUser('.com'); function has ".com" keyword manually written in instead of using the input box.

Currently, index.php:

<input id="search">
    <table border="1" BORDERCOLOR=black>
    <thead> 
    <tr>
        <th>Name</th><th>LastName</th><th>E-Mail</th>
    </tr>
    </thead>

    <tbody id="theContent">

    </tbody>

    </table>

    </body>

    <script type="text/javascript">

    function loadUser(){

        $.ajax({
            url: 'users.ajax.php'

        }).done(function(data){
            var HTML = '';
            data = JSON.parse(data);

            $.each(data['usersData'], function(key, val){
                HTML += getSingleUserLine(val);
            });


            $('#theContent').html(HTML);

            $( '#search' ).keyup(function() {   // need it to send the keyword here and refresh the results?
                 alert( "Handler for .keyup() called." );
            });

        });
        }

    function getSingleUserLine(data){
        if(data){
            var string = '';

            string = '<tr><td>'+data.fname+'</td><td>'+data.lname+'</td><td>'+data.email+'</td></tr>';

            return string;

        }else{
            return false;
        }
    }

    $(document).ready(function(){
            loadUser();
    });
    </script>

in users.ajax.php:

$return = array();

    include('db.class.php');
    include('user.class.php');

    $DB = new DB(XXXXXXXX)
    $USER = new User(); 

    $data = $USER->findUser('.com');


    $return['usersData'] = $data;

    echo json_encode($return);

Answer 1

I decided to start from the ground up, and found quite an easy solution:

I edited the loadUser() like so :

function loadUser(){

        $.ajax({
            url: 'users.ajax.php',
            data: { 'keyword': $('#search').val() },


        }).done(function(data){
            var HTML = '';
            data = JSON.parse(data);

            $.each(data['usersData'], function(key, val){
                HTML += getSingleUserLine(val);
            });

            $('#theContent').html(HTML);

        });

    }

then in the end:

$(document).ready(function(){


            $( '#search' ).keyup(function() {
                 loadUser();
            });

    });

users.ajax.php:

$data = $USER->findUser($_GET['keyword']);

Thanks for Your time trying to help me out though!