How to make <span> text appear in input field? This is a weird one!

I am trying to have text copy from one text input field to the other as a user types. I have been able to accomplish this thanks to everyone’s help, but I ran into a problem.

If you visit the following page and type “Sub” in the “Car Manufacturer” text box, you will see it duplicate in the “TestField” text box. However, since it is an autosuggest text box, Subaru pops up (which is normal and working fine.)

However, if you only type “Sub” and “Subaru” is suggested and you select it, only “Sub” is duplicated over to the next box. You will notice also that once you select “Subaru” a checkbox with the text “Subaru” next to it is generated. So, therefore I need to use the “subaru” text that is next to the check box instead. That is the only way around this problem.

You can see the problem here (remember to only typ “sub” in the field and select “Subaru” to see what I’m talking about:

http://www.forzazone.com/forza-car-designs-and-paint-jobs/forza-motorsport-4-car-designs-and-paint-jobs/new-listing_c66/

Here is the code I’m currently using to perform the duplication:

<script>

(function($) {

   $('.jr-page').on('keyup','.jrAutoSuggest',function(){
      $('.jr_testfield').val($(this).val());
   });

})(jQuery);


</script>     

So, I need to be able to have the text that is near the checkbox to duplicate over into the .jr_testfield input. Problem is the text is wrapped in a <span> tag and doesn’t appear until a user selects it from the autosuggest.

Any ideas?

Are you using jQuery autocomplete?
If so then you can hook into the select event which is fired when an item is selected from the menu.
http://api.jqueryui.com/autocomplete/#event-select