Bind delay

I have a simple ajaxy directory search tool. I want to wait until the user has finished typing in the search box before executing the queries. My directory has over 100,000 names and I search the firstname, lastname, email, and id# so it can take a couple of seconds to execute.

I’m thinking I might have to add a keypress time array and check its last value against current time before executing the query, but wanted to see if there was an easier method. Don’t really want to add a go button to form.

What I have:


main.cfm
<cfform>
<cfinput type="text" name="search" />
</cfform>

//on keyup get the list of names based on cfinput search value.
<cfdiv bind="url:get_namelist.cfm?search={search@keyup}"   id="myDiv" />


devised a simple solution. I changed the CFDiv trigger event to Blur, then tell the search input when to blur using a timer after the user has finished typing.


add this:

<script language="javascript>
//uses jquery

function keep_focus(){
	$("#search").focus();
	setTimeout('doBlur()',2000);
}


function doBlur( ){
  //alert("blurred");
   $("#search").blur();
   //after I blur it so the CFDiv can fire Reset the focus to the search box.
   $("#search").focus();
  
}
</script>

and some minor changes here.


<cfform>
<cfinput type="text" name="search" [B]id="search" onKeyUp="keep_focus";[/B] />
</cfform>

//on keyup get the list of names based on cfinput search value.
<cfdiv bind="url:get_namelist.cfm?search={[B]search@blur[/B]}"   id="myDiv" />


Slight modification since I wanted to click outside the search box to do other things


add this:

<script language="javascript>
//uses jquery

var t = 0;
function keep_focus(){
//clear timeout so it does not execute multiple times.
	clearTimeout(t); 
//set focus
	$("#search").focus();
//set timer for doBlur execution.
	t=setTimeout('doBlur()',2000);
}


function doBlur( ){
  //alert("blurred");
   $("#search").blur();
   
  
}
</script>