Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

delay search while they type.

Posted on 2010-11-26
7
Medium Priority
?
313 Views
Last Modified: 2012-06-27
Hi

I am using a simple ajax function to look up results based on text entered into a text field.

My function is called on the onkeyup event, which currently delays the ajax call until at least 4 characters have been typed.

However I would also like to delay the ajax call if they are still typing. So I was thinking it should wait a second to see if they have stopped entering text.

Can someone show me how to do this please.

Regards
Bill


function LookUp(searchtext,howlong,url,divtag)
	{
	
	var st = searchtext;
	var l = st.length;

		if (l > howlong)
		{
			ajax_thing(divtag,url+searchtext);
		}
		else
		{
			document.getElementById(divtag).innerHTML = '';
		}

	}

Open in new window

0
Comment
Question by:Bill_Harrison
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 7

Expert Comment

by:Ironhoofs
ID: 34216879
Try this code. It checks after 1 sec (1000 milliseconds) if the ID of the last key pressed is still valid.
<html>
<head>
  <title>To type or not to type</title>
  <script language="javascript">
  
	var chkId = 0;
	function IsTyping(curId) {
		//Check if the ID of the last key pressed is still the current ID
		if (curId == chkId) {
			alert('Typing has stopped!');
		}
	}
  
  </script>
</head>

<body>

<input type="text" id="Search" value=""onKeyUp="setTimeout('IsTyping(' + ++chkId + ')', 1000);" /> <br />

</body>
</html>

Open in new window

0
 
LVL 7

Expert Comment

by:Ironhoofs
ID: 34216887
Forgot a space between value="" and onKeyUp.. Still works on my IE though :)
<input type="text" id="Search" value="" onKeyUp="setTimeout('IsTyping(' + ++chkId + ')', 1000);" /> <br />

Open in new window

0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34216939

...or

<html>

<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26639913.html</title>

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script>
var timer;
var searchText = null;

function doSearch()
{
  var text = $("#search").val();

  if ( text.length > 3 && text == searchText )
  {
    clearTimeout( timer );
    alert( "Now searching for '" + $("#search").val() + "'." );
  }
  else
  {
    searchText = text;
  }
}

$(function(){
  timer = setInterval( "doSearch()", 1000 );
});
</script>

</head>

<body>

<input id="search" type="text" />

</body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 6

Expert Comment

by:limweizhong
ID: 34217123
Try this:
var lt; // Must be global
function LookUp(searchtext,howlong,url,divtag)
{
	var st = searchtext;
	var l = st.length;
	var t=(new Date()).getTime(); // Get time in milliseconds
	if( t > lt + 1000 ) // Delay of 1000 ms
	{
		if (l > howlong)
		{
			ajax_thing(divtag,url+searchtext);
		}
		else
		{
			document.getElementById(divtag).innerHTML = '';
		}
	}
	lt=t; // Set time of last keypress to time of new keypress
}

Open in new window

0
 

Author Comment

by:Bill_Harrison
ID: 34217769
Hi

Thanks for the replies, however its not working the way I had hoped.

Perhaps if I describe the effect I am looking for, someone might be able to point me in the right direction or alter the code.

I would like to be able to type text into the text field eg: 'bill' this would then fire off an ajax call that returns matching data.

However if the returned data was too much I would like to be able to type a few more letters eg: 'bill harrison' so as to narrow the results returned by the ajax.

I would prefer not the fire the ajax call until at least 4 characters have been entered and not fire the ajax call while I am typing.

Thanks for your help so far.
Bill
0
 
LVL 6

Accepted Solution

by:
limweizhong earned 1000 total points
ID: 34221811
I would prefer not the fire the ajax call until at least 4 characters have been entered and not fire the ajax call while I am typing.

Sorry I didn't think properly.
Try this:
var t=false; // Must be global
function LookUp(searchtext,howlong,url,divtag)
{
	var st = searchtext;
	var l = st.length;
	if( t ) clearTimeout(t);
	if (l > howlong)
	{
		q=function(){ ajax_thing(divtag,url+searchtext); };
		t=setTimeout(q,1000);
	}
	else
	{
		document.getElementById(divtag).innerHTML = '';
	}
}

Open in new window

0
 

Author Closing Comment

by:Bill_Harrison
ID: 34229120
Exactly what I was looking for.

Many thanks for your help.

Bill
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question