Welcome to WebmasterWorld Guest from 54.205.75.60

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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

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



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)

5+ Year Member



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)

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



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)

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



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)

5+ Year Member



thank you for your help much appreciated..