Question

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

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

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

无奈之下，我尝试了不同的事件，例如keyup，keydown，change，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我希望结果是它实际查询正确单词的最后一张图片，而不是从搜索框中捕获其他值或没有值。

Answer 1

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

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

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

1 个答案: