Return 清除搜索表单时恢复到原始状态

Question

我有一个页面显示 HTML table 填充了 MySQL 数据，上面有一个搜索输入字段。
当我使用该搜索 (keyup) 时，会调用 AJAX 脚本，并且 table 内容会随搜索结果一起减少。到目前为止一切顺利。

只有当我清除搜索字段时，我才想再次显示原始 HTML table。我认为问题是 GET 变量的最后一个字符不能是 backspaced/removed.
示例：

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

因此，它没有返回到原始 table 状态，而是不断向我显示包含 'W'.

的所有条目

我的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);
                    }
                }
            });
        }
    });
})

Answer 1

那是因为您的动作侦听器仅在值不为空时才起作用。您可以使用 else 语句显示原始搜索 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);
                }
            }
        });
    }

Answer 2

好吧，既然你有这条线：

 if (speler !== '') {

无法刷新到原点。因为如果您清除所有输入（从 'w' 到 ''），则条件未填充，然后不刷新。

Return 清除搜索表单时恢复到原始状态

Return to original state when clearing search form

php

mysql

ajax

jquery