CODEWITHSUNDEEP
javascriptjquery
MojoDK
MojoDK

Reputation: 4528

Delay on jquery keyup?

I'm trying to create my own "autocomplete", but when I type a letter (eg. w for word), then there's a splitsecond delay - enough to annoy the eye.

Here's my 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;
      };
    };
  });
});

And a fiddle sample: https://jsfiddle.net/25gwz1qu/1/

If you type in the letter w - delete it - type it again and so on, then you will notice a small delay. It might seam that the delay is a bit longer in IE.

Any idea how to get rid of this delay?

Thanks

Upvotes: 3

Views: 228

Answers (3)

OBender
OBender

Reputation: 2570

Please take a look on my solution with comments that explain why I did those changes and here is a Working Fiddle. On my machine the auto-complete is almost instant after those modifications.

enter image description here

$(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;
      };
    };
  });
});

Upvotes: 1

Rickkwa
Rickkwa

Reputation: 2291

The reason for the delay you are seeing is because the event triggers once the user lets go of the key. In that case, the oninput is the way to go. The event triggers when the textbox input changes. 

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

Upvotes: 1

Sagar R
Sagar R

Reputation: 613

try this,

$(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;
      };
    };
  });
});

Upvotes: -1

Related Questions