Javascript not calling from Visualforce

Question

I have this visualforce page and it does not appear to be running the javascript OnKeyUp. Any ideas why this is not calling on each key-up?

<script type="text/javascript">
      function doSearch() {
        searchServer(
          document.getElementById("clientName").value);
      }
  </script>  

 <apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
      <apex:param name="clientName" value="" />          
  </apex:actionFunction>

<table cellpadding="2" cellspacing="2">
  <tr>
    <td style="font-weight:bold;">Client Name<br/>
    <input type="text" id="clientName" onkeyup="doSearch()"/>
    </td>
  </tr>
</table>

Answer 1

You are likely to have some problems running an actionFunction on keyup. This is because Salesforce will take longer to process your request than it takes a user to type each letter. This results in a long queue of requests and some odd performance. Ideally, you want to use a timeout via javascript's window.setTimeout (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout) function. Every time you get a keyUp event, cancel the previous event with window.clearTimeout() and add a new event for doSearch() for ~500ms in the future. This way, when the user stops typing for half a second, your actionFunction gets invoked, but it is not continuously invoked as the user types. You can play around with that delay to get your desired behavior.

EDIT - Here is some sample JS code that accomplishes what I was referring to:

<input id="clientName" type="text" onkeyUp="queueSearch()" />
<script>
  var currentQueueId;
  var queueDelay = 500; // in ms
  var queueSearch = function() {

    // clear any old event
    window.clearTimeout(currentQueueId);

    // add a new event
    currentQueueId = window.setTimeout(doSearch, queueDelay);
  }

  var doSearch = function() {
    var searchTerm = document.getElementById("clientName").value;

    actionFunction(searchTerm);
  }

  // This would actually be your apex:actionFunction
  var actionFunction = function(searchTerm) {
    alert(searchTerm);
  }
</script>