homepage Welcome to WebmasterWorld Guest from 50.17.107.233
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
onkeyup delay
event to be delayed for optimisation
abushahin




msg:4394861
 6:41 pm on Dec 6, 2011 (gmt 0)

Hi
I have an okeyup event which queries the database, the problem is i have around 6 queries executing onkeyup, i wanted to know if there is a way to delay the onkeyup so that the query is executed after the user has finished their input and not after each letter, onchange i think requires the textbox to be out of focus before it is deemed as changed so that wont work any other events that maybe usefull or anything im missing?
any help appreciated.

 

Fotiman




msg:4394897
 7:50 pm on Dec 6, 2011 (gmt 0)

You may want to use setTimeout to delay the query to the database. For example, as the user types, the onkeydown/onkeypress event might call clearTimeout to cancel a pending timer. Then onkeyup calls setTimeout to start a new timer. This way, as the user types, the timer might be cancelled until the user has finished typing.

abushahin




msg:4394900
 8:06 pm on Dec 6, 2011 (gmt 0)

thanks for your reply, in your reply are you talking about a timeout in server side or javascript? which is going to be better optimised?

Fotiman




msg:4394909
 8:47 pm on Dec 6, 2011 (gmt 0)

The timeout should happen client side. It would be inefficient to send a bunch of requests to the server for each key press when you don't care about them.

abushahin




msg:4394912
 9:18 pm on Dec 6, 2011 (gmt 0)

Fotiman thanks so much for your reply, i tried a timeout using javascript, but the query is still executing but after a delay. I guess what i really want is a something that makes onkeyup execute after the first three characters. so the first three are ignored and then on the fourth character the event should be triggered.
any suggestions very much appreciated.

Fotiman




msg:4394929
 10:15 pm on Dec 6, 2011 (gmt 0)

Here's an example to get you started. Note, some keys (like backspace) don't trigger the keypress event (but do trigger a keydown). I find it's best to cancel the scheduled server request for both keydown and keypress events.


<!DOCTYPE html>
<html>
<head>
<title>onkeyup test</title>
</head>
<body>
<form action="#">
<div>
<p>
Enter text into the textbox below. If you stop entering text for 1.5 seconds, you'll
see an update with the value that would be sent.
</p>
<input id="searchField">
<div id="debugLog"></div>
</div>
</form>
<script>
(function () {
var debugLog = document.getElementById('debugLog'),
searchField = document.getElementById('searchField'),
timerId = null;

function sendRequest() {
// This is where you'd send the request to the server. For this example,
// I'm only appending it to the current page, just to show what would be sent
debugLog.innerHTML = debugLog.innerHTML + "<div>searchField Value Sent: '" + searchField.value + "'<\/div>";
}
searchField.onkeydown = function () {
// User is not done typing, so clear the timeout (cancel the scheduled update)
clearTimeout(timerId);
}
searchField.onkeypress = function () {
// User is not done typing, so clear the timeout (cancel the scheduled update)
clearTimeout(timerId);
}
searchField.onkeyup = function () {
// Schedule the update to happen in 1.5 seconds (adjust to your preference)
timerId = setTimeout(sendRequest, 1500);
}
})();
</script>
</body>
</html>

Fotiman




msg:4394931
 10:18 pm on Dec 6, 2011 (gmt 0)

You could modify this slightly to only send when at least 4 characters were entered:


function sendRequest() {
// This is where you'd send the request to the server. For this example,
// I'm only appending it to the current page, just to show what would be sent
if (searchField.value.length >= 4) {
debugLog.innerHTML = debugLog.innerHTML + "<div>searchField Value Sent: '" + searchField.value + "'<\/div>";
}
}

abushahin




msg:4395264
 5:28 pm on Dec 7, 2011 (gmt 0)

thank you for your help much appreciated..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved