Как остановить keyup ajax call, если нет результатов?

Question

Я использую вызов .ajax для автозаполнения поиска по ключу.Он начинает посылать вызов, когда я ввожу более 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

Установите флажок, указывающий, что результатов больше нет, и сбросьте его, если введен новый префикс ключевого слова:

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

                }
            });
        }
    });
});

Answer 2

Я сделал небольшую концепцию о том, как что-то подобное может работать (если я правильно интерпретировал ваш вопрос).

Отредактированный код 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 '';
}

}

Надеюсь, это вам немного поможет.