Dynadot

Javascript/ajax wait until user stops input

Spaceship Spaceship
Watch
Impact
1
OK i dont really understand while this is such a challange but all I want it to do is wait until the user stops typing in the input box then execute function ajax()

any help plz
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML>
<HEAD>
<TITLE>Search </TITLE>
<STYLE type=text/css><!--
#NAV A {TEXT-DECORATION: none}
#NAV A:hover{TEXT-DECORATION: underline}
//--></STYLE>
<META name="description" content=" Search Anything on the internet!">
<META name="keywords" content="Search Find internet net monster">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000080" VLINK="#000080" ALINK="#000080"
ONLOAD="window.defaultStatus='SearchMonster.net'">

<TABLE WIDTH="550" CELLPACING="0" BORDER="0"><TR><TD><FONT FACE="Arial,Helvetica" SIZE="6" COLOR="000080">Search Monster</td><td>
</TD></TR>
<TR HEIGHT="15" ID="NAV" BGCOLOR="000080"><TD colspan=2><FONT FACE="Arial,Helvetica" SIZE="2" COLOR="FFFFFF"> 

<A HREF="index.php"><FONT COLOR="FFFFFF"><B>Main</B></FONT></A> |
<A HREF="submit.php"><FONT COLOR="FFFFFF"><B>Submit your link</B></FONT></A> |
<A HREF="torrents"><FONT COLOR="FFFFFF"><B>Search For Torrents</B></FONT></A> |
Not working?
<A HREF="help.php"><FONT COLOR="FFFFFF"><B> Regular Searching</B></FONT></A> |
<A HREF="help.php"><FONT COLOR="FFFFFF"><B>Help</B></FONT></A>

</TD></TR>
<TR><TD colspan=2><FONT FACE="Arial,Helvetica" SIZE="2"><P ALIGN="JUSTIFY">


<br><br><br><br>

<p>                             <center>

<script type="text/javascript">
var hand=NULL;
var countDown = 0;
var press =0;

function b(){

countDown = 4;
if(press > 0){
hand = window.ClearTimeout(hand)
}

t();

}

function t(){

hand = window.setTimeout(t, 1000, true);
press++;
countDown--;
if(countDown <= 2)
ajax();
}


function ajax()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {

     document.getElementById('read').innerHTML=xmlhttp.responseText;

  }
}



xmlhttp.open("GET","sajax.php?search="+this.form.elements['message'].value);
xmlhttp.send(null);

}





</script>




<form id="form">

<p>
Just type and wait....</p>
                   <br>
<input type ="text" name="message" id="message" onchange="b()" 



<button onclick="ajax()">Search</button>
</form>

<div id="read">


</div>
</body>
</html>
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
define "stops typing". do you mean they are no longer inputting characters? or they click elsewhere after typing (to make the textbox lose focus)?

no longer inputting characters could be difficult because somebody may just type slowly, so you'd have to set some sort of timer - and that can cause problems in the fact that if the ajax() gets called too early.

the click elsewhere is easy because you just use onblur, check that there is some text in the box, and then call ajax.

also, if you aren't strong with ajax itself, you may want to look into jquery's ajax handling framework... it's saved me countless hours and headaches of doing ajax queries.
 
0
•••
no longer inputting characters
 
0
•••
this is the code i use, if no new characters are inputted for a set time it will do an action, each time a user types, the timer is reset:

PHP:
function search(data){
					
	if (data.zid){
		clearTimeout(this.zid);
	}	
	data.zid = setTimeout(function(){
		ajax();
	},1000);
					
}

where data is an element (i pass it by putting <input onkeyup="search(this)" />) and to adjust the time simply edit it, its currently 1000 (milliseconds)

demo @ my16bars.com (the quick search)

hope this helps
 
0
•••
that's how it would be done, but keep in mind that if your ajax query is a large one, it could cause significant slowdown or even taxing on the server if you have a high usage of it.
 
0
•••
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back