Databases
StackOverflow2013
Postsdbo
POjQuery keyup Delay
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery keyup Delay
    text
    copied!<p>Hopefully this is a quick and easy one for someone to figure out. I am fairly new to using a lot of javascript/jquery, and I have the following setup to pull a customer name out of a database and display it as the user has finished typing the customer ID.</p> <p>All works great, but it searches at each <em>keyup</em>. I know I could change it to <em>blur</em> but I want it to search as they go, at a <strong>delay</strong>.</p> <p>Here is the current code:</p> <pre><code>function postData(){ var id = $('#id').val(); $.post('inc/repairs/events-backend.php',{id:id}, function(data){ $("#display_customer").html(data); }); return false; } $(function() { $("#id").bind('keyup',function() {postData()}); }); </code></pre> <p>As you can see it is binding to each keyup which means that if you search too quick, it may leave you with the wrong result as it was still being loaded. (ie if no matches are found, it displays an error, and typing fast enough leaves the user needing to backspace and retype the last number)</p> <p>Could someone assist in adding a delay to the existing code, and if possible a small explaination as to the change you made, I rather not just copy and paste without understanding.</p> <p><strong>---- EDIT ----</strong></p> <p>This is the code I finished up with, thank you guys!</p> <pre><code>function postData(){ var id = $('#id').val(); $.post('inc/repairs/events-backend.php',{id:id}, function(data){ $("#display_customer").html(data); }); return false; } $(function() { var timer; $("#id").bind('keyup input',function() { timer &amp;&amp; clearTimeout(timer); timer = setTimeout(postData, 300); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload