how to write a jquery event handler for dependent auto - complete fields ?

Question

I have a form with 2 text fields which get populated using auto complete. Now when I enter some value in form 1 (through autocomplete ), I want the second form field to fetch the auto complete values using text entered in field1 as one of the parameters. Lets say ,

text 1 < contains car brand names which are auto populated >

text 2 < models of all cars again auto populated > ( key = car brand )

After entering the value in text 1 e.g Ford , I want to trigger an event which will load the auto fill in text2 taking 'Ford' as key i.e load all cars belonging to 'Ford' ( all auto fills happen through ajax calls for me )

Which is the best event trigger ( keypress , keyup or onchange ) which I should use to achieve this seamlessly without any time lags or sync issues ?

Let me know if I am not clear.

Answer 1

I would use "focusout" event on the first text box.

$('#text_box_one').focusout(function() {
  //Your auto-complete code goes here.
  //Or preferably replace this inline function with a call to an auto-complete function
});

Answer 2

Try this:

 <input type="text" name="text1" value="whatever" id="text1" />
 <input type="text" name="text2" value="whatever" id="text2" />

Now you can use JQuery like this:

 $("#text1").blur(function(){
    $("#text2").val = $(this).val();
 });

I have used blur event here but you can use corresponding keypress, change as per your requirement.