Forum Moderators: open
<!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>
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>";
}
}
