如果没有结果，如何停止 keyup ajax 调用？

Question

我正在使用 .ajax 调用在 keyup 上进行自动填充搜索。当我输入超过 3 个字符时，它开始发送呼叫。当没有更多结果时，我想停止更多的 ajax 调用，因此用户可以在每次编写字符时继续填充输入而无需新调用。 有人可以帮忙吗？

$(document).ready(function () {
    $("#search-name").keyup(function () {
        var input = $("#search-name").val();
        if (input.length > 3) {
            $.ajax({
                type: "POST",
                url: "inc/autofill_name.php",
                data: 'keyword=' + $(this).val(),
                beforeSend: function () {
                    $("#search-name").css("background", "#FFF");
                },
                success: function (data) {
                    $("#suggesstion-box").show();
                    $("#suggesstion-box").html(data);
                    $("#search-name").css("background", "#FFF");
                }
            });
        }
    });
});

function selectName(val) {
    $("#search-name").val(val);
    $("#suggesstion-box").hide();
}

已添加 PHP 代码：

if(!empty($_POST['keyword'])) {

    $keyword = $_POST["keyword"]; 
    $query ='SELECT * FROM users WHERE name like ' . quote_smart($keyword,1). ' GROUP BY name ORDER BY name LIMIT 30';

    $results = mysqli_query($mysqli, $query);   
    if(!empty($results)) {

        echo '<ul id="user-list">';

        foreach($results as $user) {
            $username = htmlspecialchars(''.$user["name"].'', ENT_QUOTES);

            echo '<li onClick="selectName(\''.$username.'\')">'.$user['name'].'</li>';
        } 
        echo '</ul>';
    } 

}

Answer 1

我提出了一个概念关于这样的事情如何可以工作（如果我正确地解释了你的问题）。

编辑的 Javascript 代码

$(document).ready(function () {
//0 => there are results, else equal to the text input length on which no results could be retrieved anymore.
var noMoreResults = 0;

$("#search-name").keyup(function () {
    var input = $("#search-name").val();
    var inputLength = input.length;

    if (inputLength > 3) {
        //Make a Ajax Call if there are results (noreMoreResults == 0) or if the noMoreResults is set AND the inputLength is less than the length on when no results could be retrieved anymore.
        if (noMoreResults == 0 || (noMoreResults !== 0 && inputLength < noMoreResults)) {
            noMoreResults = 0;

            $.ajax({
                type: "POST",
                url: "inc/autofill_name.php",
                data: 'keyword=' + $(this).val(),
                beforeSend: function () {
                    $("#search-name").css("background", "#FFF");
                },
                success: function (data) {
                    //If there aren't any results.
                    if (data.length == 0) {
                        //Set noMoreResults to the input length.
                        noMoreResults = inputLength;

                        return;
                    }

                    $("#suggesstion-box").show();
                    $("#suggesstion-box").html(data);
                    $("#search-name").css("background", "#FFF");
                }
            });
        }
    }
});

});

编辑的 PHP 代码

if(!empty($_POST['keyword'])) {

$keyword = $_POST["keyword"]; 
$query ='SELECT * FROM users WHERE name like ' . quote_smart($keyword,1). ' GROUP BY name ORDER BY name LIMIT 30';

$results = mysqli_query($mysqli, $query);   
if(!empty($results)) {

    echo '<ul id="user-list">';

    foreach($results as $user) {
        $username = htmlspecialchars(''.$user["name"].'', ENT_QUOTES);

        echo '<li onClick="selectName(\''.$username.'\')">'.$user['name'].'</li>';
    } 
    echo '</ul>';
} 
//Empty if there aren't any results (if this isn't the default behaviour already?).
else {
    echo '';
}

}

希望对你有所帮助。

Answer 2

有一个标志表示没有更多的结果，如果输入了新的关键字前缀则重置它：

$(document).ready(function () {

    let noResult = false;
    let minLastWord = "";

    $("#search-name").keyup(function () {
        var input = $("#search-name").val();

        if (!input.startsWith(minLastWord)) {
            noResult = false;
        }

        if ((input.length > 3) && !noResult) {
            $.ajax({
                type: "POST",
                url: "inc/autofill_name.php",
                data: 'keyword=' + $(this).val(),
                beforeSend: function () {
                    $("#search-name").css("background", "#FFF");
                },
                success: function (data) {
                    $("#suggesstion-box").show();
                    $("#suggesstion-box").html(data);
                    $("#search-name").css("background", "#FFF");

                    if (data == "") {//You can create your own condition of "emptiness"
                       noResult = true;
                       minLastWord = input;
                    } else {
                       noResult = false;
                    }

                }
            });
        }
    });
});