jQuery的Ajax搜索请求

Question

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.

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();
 }
});
}

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).

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); } );
 }
});
}

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.

Here is the HTML element that triggers either of the above two scenarios:

<h3>Site Search</h3>
    <input id="q" type="text" onkeyup="update_results()" value="Type in a search term..." onFocus="this.value='';" /><br>
    <a href="javascript:clear_results();">(Reset)</a> | <a href="search/">(Advanced Search)</a>
    <div id="results" style="text-align: left; font-size: 11px;"></div></center>
    </div> 

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.

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.

Thanks for your time, and I apologize in advance if this is a really novice question.

Answer 1

The reason you are always a few characters behind probably has something to do with this.

success: function(data) {
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); } ).keyup();
}

These "bind" actions are piling up, every time more results come back from the AJAX request. So every time the keyup action is fired, all of these different sets of results get set. I'm not sure if that made any sense, but it's not the easiest piece of code to follow.

Try changing this part to just

success: function(data) {
    $('#results').show().html(data);
}

If that looks better, try fancying it up with your fadeIn() and delay().

Another thing you'll probably want to add is something like this:

$('#q').blur(function(){ $('#results').hide() });

This will make it so that when you leave the text field (blur) it will hide the results.