Question

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

我想知道如何在每个findUser();上使用MySQL搜索查询从输入框传递一个关键字（以及如何创建它以进行发送）并刷新显示的内容.keyup中的内容。

现在它正确地找到了＃34; .com＆＃34;因为在users.ajax.php中#theContent函数有＆＃34; .com＆＃34;关键字手动编写而不是使用输入框。

目前，index.php：

findUser('.com');

在users.ajax.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>

Answer 1

使用$_GET参数将输入关键字从输入字段发送到ajax.php。

当keyUp发生时调用loadUser：

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

使用loadUser方法执行此操作：

function loadUser(){

     var searchval = $("#search").val();

     $.ajax({
        url: 'users.ajax.php?term='+searchval;

    })

在ajax.php中，使用$ _GET ['term']访问字段值：

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

Answer 2

     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);

Answer 3

我决定从头开始，找到了一个非常简单的解决方案：

我像这样编辑了loadUser（）：

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);

        });

    }

然后到最后：

$(document).ready(function(){


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

    });

users.ajax.php：

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

感谢您抽出时间帮我解决问题！

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

3 个答案: