php - AJAX实时搜索并不总是在搜索框中包含完整的值

我正在为我的网站设置一个基本的AJAX实时搜索，但是遇到一个问题，有时我的搜索框的全部价值无法正确捕获。

例如，如果我在搜索框中输入“ roll”，有时它将返回“ ro”的值。这是最常见的情况，如下所示：https://imgur.com/a/u1vLhuz

我说这是最常见的情况，因为在上面的链接中，即使'roll'是每个结果的搜索框的值，您也会看到捕获的不同值。最后一张图片是理想的结果。好像我输入值的速度过快，因为在缓慢键入每个字符时无法重现该问题。

无奈之下，我尝试了各种事件，例如keyup，keydown，更改，keypress .on（'Keyup'）等。将javascript变量登录到控制台会显示错误的值，因此sql语句显然返回了错误的结果（如在上面的相册中看到）。

我的index.php基本上由搜索之前的每个结果组成：

<ul id="search-results" class="grid cs-style-2 justify-content-center">
    $cosmetic->getCard($result);
</ul>

这是我的ajax.php文件的要点：

if (isset($_POST['search'])) {
    $search = $_POST['search'];
    $sql = "SELECT * FROM Cosmetics WHERE Name LIKE '%$search%' OR Type LIKE '%$search%' OR Rarity LIKE '%$search%' OR CostOrigin LIKE '%$search%' OR ImageName LIKE '%$search%' ORDER BY FIELD(Rarity,'legendary','epic','rare','uncommon','common'), Name";
    echo($sql);
    $result = $connection->query($sql);
    $cosmetic->getCard($result);
}

这是index.php中包含的script.js文件：

$(document).ready(function() {
       $("#search").on("keyup", function() {
           var name = document.getElementById("search").value;
           console.log(name);
           if (name !== " ") {
               $.post('/test/ajax.php',{search:name}, function(data){
                   $("#search-results").html(data);
           });
        }
    });
});

在此专辑中：https://imgur.com/a/u1vLhuz我希望结果将是最后一个实际查询正确单词的图像，而不是从搜索框中捕获其他值或没有值。

最佳答案

此查询应以正确的顺序输出它们。
第一项：与搜索字词完全匹配
下一项：以搜索词开头的项目
第三项：所有包含搜索词的项目

SELECT *
FROM Cosmetics
WHERE Name LIKE '%$search%'
ORDER BY (CASE WHEN name = '$search' THEN 1 WHEN name LIKE '$search%' THEN 2 ELSE 3 END);

关于php - AJAX实时搜索并不总是在搜索框中包含完整的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55406799/