Welcome to WebmasterWorld Guest from 107.20.54.98

Forum Moderators: open

Message Too Old, No Replies

onkeyup delay

event to be delayed for optimisation

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

Junior Member

5+ Year Member

joined:Nov 20, 2009
posts: 98
votes: 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.
7:50 pm on Dec 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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.
8:06 pm on Dec 6, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 20, 2009
posts: 98
votes: 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?
8:47 pm on Dec 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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.
9:18 pm on Dec 6, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 20, 2009
posts: 98
votes: 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.
10:15 pm on Dec 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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>
10:18 pm on Dec 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


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>";
}
}
5:28 pm on Dec 7, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 20, 2009
posts: 98
votes: 0


thank you for your help much appreciated..