时间戳

首页 > 解决方案 > 如果没有结果，如何停止 keyup ajax 调用？

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

问题描述

我正在使用 .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>';
    } 

}

标签： javascriptphpjqueryajax

解决方案

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

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

                }
            });
        }
    });
});

推荐阅读