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

我就如何（如果我正确解释了您的问题）做了一些概念。

已编辑的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;
                    }

                }
            });
        }
    });
});

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

2 个答案: