Javascript 在停止写入后在文本输入后触发操作？

我一直在做一个可视化的force搜索页面，遇到了一个问题。我有一个文本输入部分来搜索记录的名称。但是，它会在每次输入任何字母时更新。我希望它只在用户停止键入后进行搜索。我发现关于这个问题。然而，由于我对编码（尤其是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>

var-oldG；
var-oldAP；
变量延迟=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（'#name'）.keyup（函数（）{
延迟（函数（）{
}, 1000 );
});    
函数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}”）。值=”；
}
oldG=document.getElementById（“{！$Component.geography}”）.value；
oldAP=document.getElementById（“{！$Component.agmtPurpose}”）.value；
搜索服务器(
document.getElementById（“名称”）.value，
document.getElementById（“{！$Component.agmtPurpose}”）.value，
document.getElementById（“{！$Component.agmtCategory}”）.value，
document.getElementById（“{！$Component.geography}”）.value，
document.getElementById（“{！$Component.subgeography}”）.value
);   
}
函数doClear（）{
document.getElementById（“名称”）.value=''；
document.getElementById（“{！$Component.agmtPurpose}”）.value=''；
document.getElementById（“{！$Component.geography}”）.value=''；
document.getElementById（“{！$Component.agmtCategory}”）。值=”；
document.getElementById（“{！$Component.subgeography}”）.value=''；
搜索服务器(
document.getElementById（“名称”）.value，
document.getElementById（“{！$Component.agmtPurpose}”）.value，
document.getElementById（“{！$Component.agmtCategory}”）.value，
document.getElementById（“{！$Component.geography}”）.value，
document.getElementById（“{！$Component.subgeography}”）.value
);
}
//
//$（'#element'）.donetyping（回调[，超时=1000]）
//当用户完成键入时激发回调。这是由经过的时间决定的
//自上次击键和超时参数或模糊事件（以先到者为准）起。
//@callback:偶数触发时要调用的函数
//@timeout：（默认值=1000）超时，以毫秒为单位，如果未触发事件，则在触发事件之前等待
//由模糊引起的。
//需要jquery1.7+
//
;（函数（$）{
$.fn.extend({
donetyping:函数（回调、超时）{
超时=超时| | 1e3；//1秒默认超时
var超时参考，
doneTyping=函数（el）{
如果（！timeoutReference）返回；
timeoutReference=null；
callback.call（el）；
};
返回此值。每个函数（i，el）{
变量$el=$（el）；
//Chrome Fix（在按键上使用keyup检测退格）
//谢谢你，帕勒多
$el.is（':input'）&&$el.on（'keyup keypress'，函数（e）{
//这会捕捉到chrome中的backspace按钮，但也会阻止
//事件不会过早触发。如果没有这条线，
//使用tab/shift+tab将使聚焦元素触发回调。
if（e.type=='keyup'&&e.keyCode！=8）返回；
//检查是否设置了超时。如果设置了超时，“重置”时钟并
//重新开始。
if（timeoutReference）clearTimeout（timeoutReference）；
timeoutReference=setTimeout（函数（）{
//如果我们到了这里，我们的超时时间已经过去了。开火
//回拨
doneTyping（el）；
}，超时）；
}).on（'blur'，function（）{
//如果可以的话，既然我们要离开场地，就启动活动
doneTyping（el）；
});
});
}
});
})（jQuery）；
$（'#Name'）.donetyping（函数（）{
$doSearch（）；
});
协议名称

协议目的

协议类别

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