Solved

delay search while they type.

Posted on 2010-11-26
7
306 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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

627 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