title: jquery for ajax search request
body: <p>I am somewhat of a novice when it comes to jQuery and I am trying my best to understand it. Below are two pieces of code I would appreciate your feedback on. What my ultimate aim is for what is typed into the box to be queried, I'll discuss the two issues with the two pieces of code below, each respectively.</p>
  
  <pre><code>function update_results(){
  $.ajax({
      url: '{base}modules/search.php?q=' + $("#q").val(),
      success: function(data) {
      $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); } ).keyup();
   }
  });
  }
  </code></pre>
  
  <p>This piece of code once a request is thrown into a loop with the server and causes the browser to slow significantly, but works perfectly (keeps up with the characters entered).</p>
  
  <pre><code>function update_results(){
  $.ajax({
      url: '{base}modules/search.php?q=' + $("#q").val(),
      success: function(data) {
      $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); } );
   }
  });
  }
  </code></pre>
  
  <p>This piece of code doesn't have the loop issue, but whenever I type the query that is sent to my search.php page is always missing the last two-three characters.</p>
  
  <p>Here is the HTML element that triggers either of the above two scenarios:</p>
  
  <pre><code>&lt;h3&gt;Site Search&lt;/h3&gt;
      &lt;input id="q" type="text" onkeyup="update_results()" value="Type in a search term..." onFocus="this.value='';" /&gt;&lt;br&gt;
      &lt;a href="javascript:clear_results();"&gt;(Reset)&lt;/a&gt; | &lt;a href="search/"&gt;(Advanced Search)&lt;/a&gt;
      &lt;div id="results" style="text-align: left; font-size: 11px;"&gt;&lt;/div&gt;&lt;/center&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>All I'm wanting is for the content in #q to be sent to search.php?q= and for it to return the data and place it in the #results div. I also wanted to put some sort of timer in there so it won't query the server every time a character is entered by after the person is done typing as specified by some arbitrary time value, or only every few seconds. Once the person is done typing, obviously I want it to stop hammering the server.</p>
  
  <p>I looked around on the internet and I apologize if it appears like I haven't done any research. On the contrary, I just began learning jQuery just yesterday.</p>
  
  <p>Thanks for your time, and I apologize in advance if this is a really novice question.</p>