即時搜索功能落后一鍵

Question

我的網站上有一種使用即時搜索功能的“翻譯”程序。 我有一個文本區域

<textarea name="text" onkeydown="searchq();"></textarea>

運行 searchq() 函數

function searchq() {
    var searchTxt = $("textarea[name='text']").val();

    $.post("translate.php", {text: searchTxt}, function(output){
        $("#translated").html(output);
    });
}

將每個單詞發送到 translate.php

if(isset($_POST["text"])){
    $words = explode(' ',$_POST['text']);

    $i = 0;
    foreach($words as $word){
        // performs transformations on the words
        $output = $word . " ";
        echo($output);
        $i++;
    }
}

但是，如果您在我的網站http://saaa.me/MattSpeak.html上嘗試一下，您可以清楚地看到，如果您輸入“y”，則不會顯示任何內容，並且僅當您輸入下一個字母或空格時“y”會出現嗎？ 即時翻譯過程似乎落后了一個字符。 這是什么原因造成的？ （商標標志和“er”字尾是我在“翻譯”中添加的內容）

我對為什么這不能正常工作有一點想法，但不知道如何解決它。 幫助將不勝感激。

Answer 1

keydown事件在被添加的字符之前（甚至keypress事件在它之前）。 如果您想響應輸入的字母，響應input或者對於較舊和/或有問題的瀏覽器（基本上是IE9 和更早版本），使用簡短的setTimeout響應keypress 。

使用input ：

 $("textarea").on("input", function() { $("<p>").text($(this).val()).appendTo(document.body); });

 <textarea></textarea> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用帶有setTimeout keypress以便添加字符：

 $("textarea").on("keypress", function() { var $this = $(this); setTimeout(function() { $("<p>").text($this.val()).appendTo(document.body); }, 0); });

 <textarea></textarea> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

我傾向於響應一系列事件並使用去抖動，所以我不會多次響應：

 var lastSearch = null; $("textarea").on("input keyup change", function() { var search = $(this).val(); if (search !== lastSearch) { lastSearch = search; $("<p>").text(search).appendTo(document.body); } });

 <textarea></textarea> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>