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

【问题标题】：AJAX live search does not always contain the full value in the search boxAJAX 实时搜索并不总是包含搜索框中的完整值
【发布时间】：2019-03-28 21:02:10
【问题描述】：

我正在为我的网站设置基本的 AJAX 实时搜索，但我遇到了一个问题，有时我的搜索框的整个值没有被正确捕获。

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

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

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

【问题讨论】：

因为在开始处理之前您没有等待输入整个字符串，所以我认为您遇到了时间问题。我想知道如果您只是在函数中运行两次 getElementById 和 ajax 调用会发生什么，以便第二次调用处理第一次调用完成时的搜索字符串？我认为值得一试。
不幸的是，这似乎仍然是一个问题。不过我绝对同意，这似乎是一个时间问题，我也尝试过测试，但我认为它不起作用。我有 var name = $(this).delay(300).val();
脚本中的延迟无济于事，因为控制权仍在脚本中。您需要脚本来释放控制权。你让 ajax 异步运行了吗？
对不起我的无知，但默认情况下不是异步的吗？
我不知道，因为我不会使用JQuery，对不起。

标签： php mysql ajax

【解决方案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);

【讨论】：

嗨拉尔夫。谢谢，但问题不在于它们所处的顺序。而是从搜索框中捕获的值并不总是完整的值。