CODEWITHSUNDEEP
javascriptphpjquerymysqlloops
Biomehanika
Biomehanika

Reputation: 1540

Show jQuery real-time search results as <tr> elements on table

I have a real time filter on a table, as part of a ERP system. This is a text input in the foot of the table, in which user can type any part of the element's name contained on the DB, and table will show those matching.

This is the table's body:

<tbody>
<?php
while($registroBbdd = consultaRegistro($select)){
    $class="";
    $turn_id=$registroBbdd['tu_id'];
    $name=$registroBbdd['tu_name'];
    echo '<tr class="'.$class.'">
        <td><span class="tableContentRow">'.$registroBbdd['tu_name'].'</span></td>
        <td class="editColumn"><a href="#"><div class="editIcon"></div></a></td>
        </tr>'; }}      ?>
</tbody>

And this is the function which selects those whose name matches typed characters:

$(document).on('keydown', searchSuggestions)

function searchSuggestions (e) 
{
    var cadena = $('input[name=turn_tableFilter]').val();

    if(cadena.length>2)
    {
        $updateUrl = 'config/forms/turn_conf/turn_search.php';
        $.post($updateUrl, {tu_abrev:cadena}).success(showSuggestions);
    }
}

This searchSuggestions function must be working fine, as it calls properly showSuggestions function, removing all <tr> contained on the table:

function showSuggestions (datos) {
$('tbody *').remove();}

The problem is how to show them. I need to make this last function something like a loop accumulating all matching results, and then show them in real time on my table with the same <tr> structure defined before. Any ideas of how could this be done? How can I bring that data from turn_search.php and give it a proper format?

Upvotes: 0

Views: 434

Answers (1)

Abhishek Saha
Abhishek Saha

Reputation: 2564

With each key press, you need to send the request to the server passing the key parameter which was pressed. Based on that alphabet, php will fetch relevant records and display it. This goes on.

So create a div wrapping the while loop.

    <tbody>
    <div id = "searched_records"> <!--this one-->
    <?php
    while($registroBbdd = consultaRegistro($select)){
        $class="";
        $turn_id=$registroBbdd['tu_id'];
        $name=$registroBbdd['tu_name'];
        echo '<tr class="'.$class.'">
            <td><span class="tableContentRow">'.$registroBbdd['tu_name'].'</span></td>
            <td class="editColumn"><a href="#"><div class="editIcon"></div></a></td>
            </tr>'; 
      }       ?> </div>

And then write the remove function in the below way. You basically dont delete the new div, it deletes the child elements.

function showSuggestions (datos) {
    $('#searched_records').empty();
    //add new data here
    $('#searched_records').html(datos);

}

Upvotes: 1

Related Questions