Solved

delay search while they type.

Posted on 2010-11-26
7
301 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 250 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

729 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