jqueryキーアップに遅延がありますか？

Question

私は自分自身の "オートコンプリート"を作成しようとしていますが、文字を入力すると（例えば単語のためのw）、分割の遅延があります。ここで

は私のtestcodeです：

CSS：

#txtSearchAutocomplete { 
    background-color: white !important; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    font-size: 20px !important; 
    border: none !important; 
    color: gray; 
} 

#txtSearch { 
    background-color: transparent !important; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    font-size: 20px !important; 
    border: none !important; 
} 

HTML：

<span style="position: relative; display: inline-block; width:100%; top: -18px;"> 
    <input type="text" id="txtSearchAutocomplete" disabled > 
    <input type="text" id="txtSearch"> 
</span> 

JS：

$(document).ready(function($) { 
    $("#txtSearch").focus(); 

    $("#txtSearch").keyup(function(e) { 
    var autocomplete = ['word', 'excel']; 
    var $txtAutocomplete = $("#txtSearchAutocomplete"); 
    var txt = $("#txtSearch").val().trim().toLowerCase(); 

    $txtAutocomplete.val(""); 

    if (txt == "") return; 

    for (i = 0; i < autocomplete.length; i++) { 
     var entry = autocomplete[i]; 
     if (entry.indexOf(txt) == 0) { 
     $txtAutocomplete.val(entry); 
     break; 
     }; 
    }; 
    }); 
}); 

とフィドルサンプル： https://jsfiddle.net/25gwz1qu/1/

文字を入力して削除する場合はもう一度入力してください。少し遅れていることがわかります。遅れがIEでもう少し長いことを縫うかもしれません。

どのようにこの遅延を取り除くことができますか？

おかげ

Answer 1

理由があります。その場合は、oninputが行く方法です。このイベントは、テキストボックス入力が変更されたときにトリガされます。

$("#txtSearch").on('input', function(e) { ... }) 

Answer 2

はこれを試して、ユーザーがキーを行くことができます一度のイベントがトリガされているため、あなたが見ている遅延のため

$(document).ready(function($) { 
    $("#txtSearch").focus(); 

    $("#txtSearch").on('input',function(e) { 
    var autocomplete = ['word', 'excel']; 
    var $txtAutocomplete = $("#txtSearchAutocomplete"); 
    var txt = $("#txtSearch").val().trim().toLowerCase(); 

    $txtAutocomplete.val(""); 

    if (txt == "") return; 

    for (i = 0; i < autocomplete.length; i++) { 
     var entry = autocomplete[i]; 
     if (entry.indexOf(txt) == 0) { 
     $txtAutocomplete.val(entry); 
     break; 
     }; 
    }; 
    }); 
}); 

Answer 3

私はそれらの変更を行なったし、ここで働くFiddleである理由を説明するコメントで私の解決策に見てみてください。 私のマシンでは、オートコンプリートはそれらの変更の後すぐに瞬時に行われます。

$(document).ready(function($) { 
    // i had moved all selectors outside the function so the havy dom selection will happen only once 
    var autocomplete = ['word', 'excel']; 
    var $txtAutocomplete = $("#txtSearchAutocomplete"); 
    var $searchElement = $("#txtSearch"); 
    $searchElement.focus(); 
    // In Jquery on works faster than on key up, cause user lets go of the key. 
    $searchElement.on('input',function(e) { 
    var txt = $searchElement.val().trim().toLowerCase(); 
    // I had replaced the element to be a div and not a input cause the div element is much light weight and faster to draw for the browser 
    $txtAutocomplete.text(""); 
    if (txt == "") 
     return; 
    for (i = 0; i < autocomplete.length; i++) { 
     var entry = autocomplete[i]; 
     if (entry.indexOf(txt) == 0) { 
     $txtAutocomplete.text(entry); 
     break; 
     }; 
    }; 
    }); 
});