CODEWITHSUNDEEP
phpjquerymysqlajax
JK87
JK87

Reputation: 379

Return to original state when clearing search form

I have a page which shows a HTML table filled with MySQL data, with a search input field above it.
When I use that search (keyup) a AJAX script is called and the table contents are reduced with the search results. So far so good.

Only when I clear the search field I want show the original HTML table back again. I think the problem is that the last character of the GET-variable can't be backspaced/removed.
EXAMPLE:

.../search.php?search=word
.../search.php?search=wor
.../search.php?search=wo
.../search.php?search=w

So instead of returning to the original table state, it keeps showing me all entries containing a 'W'.

My search.js: 

$(document).ready(function() {
    $('#spelerzoeken').keyup(function() {
        var speler = $(this).val();

        if (speler !== '') {

            $.ajax({
                url: 'includes/search.php?search=' + speler,
                success: function(returnData) {
                    if (!returnData) {
                        $('.spelers').html('<span style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px; display: block; width: 200px">Geen speler(s) gevonden.</span>');
                    } else {
                        $('.spelers').html(returnData);
                    }
                }
            });
        }
    });
})

Upvotes: 0

Views: 57

Answers (2)

Roshyo
Roshyo

Reputation: 43

Well, since you have this line : 

 if (speler !== '') {

It can't refresh to the origine. Because if you clear all your input (from 'w' to ''), the condition isn't filled and then, no refresh.

Upvotes: 1

S.Pols
S.Pols

Reputation: 3434

That's because your action listener only works when the value isn't empty. You can use an else statement to display the original search table.

    if (speler !== '') {

        $.ajax({
            url: 'includes/search.php?search=' + speler,
            success: function(returnData) {
                if (!returnData) {
                    $('.spelers').html('<span style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px; display: block; width: 200px">Geen speler(s) gevonden.</span>');
                } else {
                    $('.spelers').html(returnData);
                }
            }
        });
    }
    else
    {
        $.ajax({
            url: 'includes/search.php?search=', //Here your AJAX request for the original table
            success: function(returnData) {
                if (!returnData) {
                    $('.spelers').html('<span style="margin-top: 20px; margin-bottom: 20px; margin-left: 10px; display: block; width: 200px">Geen speler(s) gevonden.</span>');
                } else {
                    $('.spelers').html(returnData);
                }
            }
        });
    }

Upvotes: 0

Related Questions