I've been working on a visual force search page and have run into an issue. I have a text input section to search for the name of a record. However, it updates every time any letter is input. I want it to only search after the user has stopped typing. I found this post regarding this exact issue. However, as I'm fairly new to coding (especially with js), I can't seem to figure out how to trigger my action using the js code found in the other post. Thanks for you help!
Here is my VF page code:
<apex:page controller="CorpGovSearchController" sidebar="false">
<c:LoadingBox />
<apex:form id="myForm">
<apex:pageMessages id="errors" />
<apex:pageBlock title="Agreement Search" mode="edit">
<table width="100%" border="0">
<tr>
<td width="200" valign="top">
<apex:pageBlock title="Filters" mode="edit" id="criteria">
<script type="text/javascript">
var oldG;
var oldAP;
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$('#name').keyup(function() {
delay(function (){
}, 1000 );
});
function doSearch() {
if(document.getElementById("{!$Component.geography}").value=='' || document.getElementById("{!$Component.subgeography}").value=='__' || document.getElementById("{!$Component.geography}").value!=oldG){
document.getElementById("{!$Component.subgeography}").value='';
}
if(document.getElementById("{!$Component.agmtPurpose}").value=='' || document.getElementById("{!$Component.agmtCategory}").value=='__' || document.getElementById("{!$Component.agmtPurpose}").value!=oldAP){
document.getElementById("{!$Component.agmtCategory}").value='';
}
oldG = document.getElementById("{!$Component.geography}").value;
oldAP = document.getElementById("{!$Component.agmtPurpose}").value;
searchServer(
document.getElementById("Name").value,
document.getElementById("{!$Component.agmtPurpose}").value,
document.getElementById("{!$Component.agmtCategory}").value,
document.getElementById("{!$Component.geography}").value,
document.getElementById("{!$Component.subgeography}").value
);
}
function doClear() {
document.getElementById("Name").value='';
document.getElementById("{!$Component.agmtPurpose}").value='';
document.getElementById("{!$Component.geography}").value='';
document.getElementById("{!$Component.agmtCategory}").value='';
document.getElementById("{!$Component.subgeography}").value='';
searchServer(
document.getElementById("Name").value,
document.getElementById("{!$Component.agmtPurpose}").value,
document.getElementById("{!$Component.agmtCategory}").value,
document.getElementById("{!$Component.geography}").value,
document.getElementById("{!$Component.subgeography}").value
);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
// @callback: function to be called when even triggers
// @timeout: (default=1000) timeout, in ms, to to wait before triggering event if not
// caused by blur.
// Requires jQuery 1.7+
//
;(function($){
$.fn.extend({
donetyping: function(callback,timeout){
timeout = timeout || 1e3; // 1 second default timeout
var timeoutReference,
doneTyping = function(el){
if (!timeoutReference) return;
timeoutReference = null;
callback.call(el);
};
return this.each(function(i,el){
var $el = $(el);
// Chrome Fix (Use keyup over keypress to detect backspace)
// thank you @palerdot
$el.is(':input') && $el.on('keyup keypress',function(e){
// This catches the backspace button in chrome, but also prevents
// the event from triggering too premptively. Without this line,
// using tab/shift+tab will make the focused element fire the callback.
if (e.type=='keyup' && e.keyCode!=8) return;
// Check if timeout has been set. If it has, "reset" the clock and
// start over again.
if (timeoutReference) clearTimeout(timeoutReference);
timeoutReference = setTimeout(function(){
// if we made it here, our timeout has elapsed. Fire the
// callback
doneTyping(el);
}, timeout);
}).on('blur',function(){
// If we can, fire the event since we're leaving the field
doneTyping(el);
});
});
}
});
})(jQuery);
$('#Name').donetyping(function(){
$doSearch();
});
</script>
<apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
<apex:param name="Name" value="" />
<apex:param name="agmtPurpose" value="" />
<apex:param name="agmtCategory" value="" />
<apex:param name="geography" value="" />
<apex:param name="subgeography" value="" />
</apex:actionFunction>
<table cellpadding="2" cellspacing="2">
<tr>
<td style="font-weight:bold;" onkeyup="doSearch();">Agreement Name<br/>
<input type="text" id="Name"/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Agreement Purpose<br/>
<apex:inputfield id="agmtPurpose" value="{!agmt1.Nike_SF_Contract_Category__c}" onchange="doSearch();"/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Agreement Category<br/>
<apex:inputfield id="agmtCategory" value="{!agmt1.Apttus__Agreement_Category__c}" onchange="doSearch();"/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Geography<br/>
<apex:inputfield id="geography" value="{!agmt1.NikeSF_Geography__c}" onchange="doSearch();"/>
</td>
</tr>
<tr>
<td style="font-weight:bold;">Sub-Geography<br/>
<apex:inputfield id="subgeography" value="{!agmt1.NikeSF_Sub_Geography__c}" onchange="doSearch();"/>
</td>
</tr>
</table>
<apex:pageBlockButtons location="bottom">
<apex:commandButton style="text-align:center" onClick="doClear()" title="Clear" value="Clear" rerender="results,debug,errors"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</td>
<td valign="top">
<apex:pageBlock mode="edit" id="results">
<apex:pageBlockButtons location="top" >
<apex:outputPanel id="myButtons">
<apex:commandButton action="{!Beginning}" title="Beginning" value="<<" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Previous}" title="Previous" value="<Previous" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Next}" title="Next" value="Next>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!End}" title="End" value=">>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<br/>
</apex:outputPanel>
</apex:pageBlockButtons>
<apex:pageBlockButtons location="bottom" >
<apex:outputPanel id="myButtons2">
<apex:outputlabel style="text-align:center" value="Showing Page #{!pageNumber} of {!totalPages}"/>
<br/>
<br/>
<apex:commandButton action="{!Beginning}" title="Beginning" value="<<" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Previous}" title="Previous" value="<Previous" disabled="{!disablePrevious}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!Next}" title="Next" value="Next>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
<apex:commandButton action="{!End}" title="End" value=">>" disabled="{!disableNext}" reRender="myPanel,myButtons" oncomplete="doSearch()"/>
</apex:outputPanel>
</apex:pageBlockButtons>
<apex:pageBlockTable value="{!agmts}" var="agmt">
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Agreement Name " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Name', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Name' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Name' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="Name" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Name" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputLink value="/{!agmt.id}">{!agmt.Name}</apex:outputLink>
</apex:column>
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Agreement Category " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Agreement Category', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Agreement Category' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Agreement Category' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="Apttus__Agreement_Category__c" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Agreement Category" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputField value="{!agmt.Apttus__Agreement_Category__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Agreement Type " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Agreement Type', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Agreement Type' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Agreement Type' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="NikeSF_Agreement_Type__c" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Agreement Type" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputField value="{!agmt.NikeSF_Agreement_Type__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Status Category " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Status Category', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Status Category' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Status Category' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="Apttus__Status_Category__c" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Status Category" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputField value="{!agmt.Apttus__Status_Category__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Status " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Status', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Status' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Status' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="Apttus__Status__c" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Status" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputField value="{!agmt.Apttus__Status__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Geography " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Geography', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Geography' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Geography' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="NikeSF_Geography__c" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Geography" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputField value="{!agmt.NikeSF_Geography__c}"/>
</apex:column>
<apex:column >
<apex:facet name="header">
<apex:commandLink value="Sub-Geography " action="{!toggleSort}" rerender="results,debug" style="{!IF(sortValue=='Sub-Geography', 'font-style: italic', 'font-style: normal')}">
<apex:outputPanel layout="none" rendered="{!sortValue=='Sub-Geography' && sortDir=='desc'}">▲</apex:outputPanel>
<apex:outputPanel layout="none" rendered="{!sortValue=='Sub-Geography' && sortDir!='desc'}">▼</apex:outputPanel>
<apex:param name="sortField" value="NikeSF_Sub_Geography__c" assignTo="{!sortField}"/>
<apex:param name="sortValue" value="Sub-Geography" assignTo="{!sortValue}"/>
</apex:commandLink>
</apex:facet>
<apex:outputField value="{!agmt.NikeSF_Sub_Geography__c}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</td>
</tr>
</table>
<apex:pageBlock title="Debug - SOQL" id="debug">
<apex:outputText value="{!debugSoql}" />
</apex:pageBlock>
</apex:pageBlock>
</apex:form>
</apex:page>
