PHP+Ajax 传递输入关键字进行实时搜索

Question

我已经问过这个问题，但我想这太抽象了，我得到的只是使用 DataTables 插件的建议，但我想手动进行实时搜索。

我想知道如何将关键字(以及如何创建用于发送)从输入框传递到 findUser(); 函数，并在每个 上使用 MySQL 搜索查询.keyup并刷新#theContent中显示的内容。

现在它可以正确找到带有“.com”的人，因为在 users.ajax.php findUser('.com'); 函数中手动写入了“.com”关键字而不是使用输入框。

目前，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>

在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

     function loadUser(serachWord){

        $.ajax({
            url: 'users.ajax.php',
            data: { variableForSearch: serachWord }

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

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


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



        });
        }

 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(){
     $( '#search' ).keyup(function() {   // need it to send the keyword here and refresh the results?
                 loadUser($( '#search' ).val());
            });


    });

你的PHP代码:

$return = array();

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

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

$data = $USER->findUser($_POST['variableForSearch']);


$return['usersData'] = $data;

echo json_encode($return);