jQuery, multiple inputs and onBlur

Question

So I have 2 inputs. Both are for an "autocomplete". I also have 2 functions that do pretty much the same thing... Each input calls a different function onBlur. The problem is that the second upon selecting a "suggestion" for the second input, it populates the first. What can I do to make the second one populate the second?

There's probably a better way of doing it but my jQuery/Javascript Knowledge is limited and I'm running out of time... Thanks!

The code:

function fillLocation(thisValue) {
    $('#location-box').val(thisValue);
    setTimeout("$('#suggestionsLocation').fadeOut('fast');", 200);
}

function fillTerms(thisValue) {
    $('#terms-box').val(thisValue);
    setTimeout("$('#suggestionsTerms').fadeOut('fast');", 200);
}


<input type="text" name="search_location" id="location-box" value="" onkeyup="suggestLocation(this.value);" onblur="fillLocation();" autocomplete="off" />

<input type="text" name="search_terms" id="terms-box" value="" onkeyup="suggestTerms(this.value);" onblur="fillTerms();" autocomplete="off" />

Answer 1

I guess I'm assuming you want to trigger keyup and blur events for both inputs that have similar functionality, and that will both in turn affect the same input.

This would be one way. Bind the events in javascript, not HTML, and run the proper code

$('document').ready(function() {

    $('#location-box,#terms-box')
                    .bind('keyup', function() {
                           // do your keyup thing using $(this)
                           // to refer back to the input
                           //$('body').append($(this).attr('id') + ': keyup<br />');
                           var theValue = $(this).val();
                     }) 
                     .bind('blur', function() {
                           // do your blur thing using $(this)
                           // to refer back to the input
                           //$('body').append($(this).attr('id') + ': blur<br />');
                     })
    });


<input type="text" name="search_location" id="location-box" value="" autocomplete="off" />
<input type="text" name="search_terms" id="terms-box" value="" autocomplete="off" />

EDIT:

Uncomment the $('body') lines to see the events in action.

Hope this is what you were looking for.

EDIT: Added to code to the keyup event to retrieve the value