javascript - 停止书写后输入文本后触发 Action ？

Question

我一直在开发视觉力搜索页面，但遇到了问题。我有一个文本输入部分来搜索记录的名称。但是，每次输入任何字母时它都会更新。我希望它仅在用户停止输入后进行搜索。我发现this post关于这个确切的问题。然而，由于我对编码(尤其是 js)相当陌生，我似乎无法弄清楚如何使用另一篇文章中找到的 js 代码来触发我的操作。感谢您的帮助!

这是我的 VF 页面代码:

    <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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Name' && sortDir!='desc'}">&#x25BC;</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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Agreement Category' && sortDir!='desc'}">&#x25BC;</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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Agreement Type' && sortDir!='desc'}">&#x25BC;</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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Status Category' && sortDir!='desc'}">&#x25BC;</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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Status' && sortDir!='desc'}">&#x25BC;</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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Geography' && sortDir!='desc'}">&#x25BC;</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'}">&#x25B2;</apex:outputPanel>
                        <apex:outputPanel layout="none" rendered="{!sortValue=='Sub-Geography' && sortDir!='desc'}">&#x25BC;</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>

Answer 1

$('#name').keyup(function() {
          delay(function (){
          // Whatever you want to trigger paste it here.
          }, 1000 );
 }); 

这个1000决定了用户停止输入时要在多少毫秒后触发