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

What's the variable going from the jQuery/AJAX to the PHP that holds the search keyword? — Andy Holmes
– Andy Holmes, Commented Jun 10, 2014 at 15:28
have you atleast searched how to pass a variable through ajax to php? — ɹɐqʞɐ zoɹǝɟ
– ɹɐqʞɐ zoɹǝɟ, Commented Jun 10, 2014 at 15:29
it's inadvisable to use event-listeners like $( '#search' ).keyup(function() { } inside custom functions. because the event-listener is not working till the function is called once - and you also are rebinding the listener, if you call the function again. and so on.. — low_rents
– low_rents, Commented Jun 10, 2014 at 15:32
There is no variable yet, I wasn't entirely clear, I would like to know how to create it (use what's in the 'input' box). — GytisK
– GytisK, Commented Jun 10, 2014 at 15:32
possible duplicate of Trying to pass variable values from JavaScript to PHP using AJAX — Patrick Q
– Patrick Q, Commented Jun 10, 2014 at 15:35

afsane · Accepted Answer · 2014-06-10 15:36:14Z

0

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


    });

your php code:

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

answered Jun 10, 2014 at 15:36

afsane

1,9196 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GytisK Over a year ago

Doesn't seem to work, I replaced the $(document).ready(function) keyup with alert and it doesn't react.

Sasanka Panguluri · Accepted Answer · 2014-06-10 15:38:35Z

0

Use a $_GET parameter to send the input keyword from the input field to ajax.php.

Call loadUser when the keyUp happens:

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

Do this with the loadUser method:

function loadUser(){

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

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

    })

In ajax.php, use the $_GET['term'] to access the field value:

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

edited Jun 10, 2014 at 15:38

answered Jun 10, 2014 at 15:31

Sasanka Panguluri

3,1484 gold badges35 silver badges54 bronze badges

2 Comments

GytisK Over a year ago

Nothing happens :( replacing keyup's loadUser() with alert(); shows that it doesn't react. Where am I supposed to call the keyup? at the bottom from the $(document).ready(function)()?

Sasanka Panguluri Over a year ago

In the answer you posted, this is what you seem to have done. You don't need to call keyup, the search field is already tied to that. you might have missed a couple of parentheses.

GytisK · Accepted Answer · 2014-06-10 16:24:20Z

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!

Collectives™ on Stack Overflow

PHP+Ajax Passing input keyword for live search

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related