Solved

delay search while they type.

Posted on 2010-11-26
7
288 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
Comment Utility
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
Comment Utility
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
Comment Utility

...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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Expert Comment

by:limweizhong
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Exactly what I was looking for.

Many thanks for your help.

Bill
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now