即時搜索功能是背後的一個按鍵

Question

我的網站上有一種「翻譯」程序，它使用即時搜索功能。我有一個textarea

<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」。即時翻譯過程似乎是一個字符落後。這是什麼造成的？（商標符號和「呃」字的結尾是我添加的作爲「翻譯」的一部分的東西）

我有一個輕微的想法，爲什麼這不能正常工作，但沒有線索如何解決它。幫助將不勝感激。

Answer 1

的​​事件先於所添加的字符（即使keypress事件之前它）。如果您想回復正在輸入的信件，請回復input，或者對於較老的和/或有問題的瀏覽器（基本上IE9 and earlier），請使用簡短的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>

使用keypress用setTimeout這樣的字符被添加：

$("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>