jQuery Fill another textbox with autocomplete

Question

Bit of a weird problem I'm having, I want to disable a textbox after using the auto-complete function, I've done this by hiding the correct box and showing the new one and setting the value to the same.

The first text box that is hidden has the correct data in but the second is just showing the numbers typed before I click on the auto-complete, heres my code so far:

Done a jsfiddle to show what I mean, type in 26 then CLICK on the number.

http://jsfiddle.net/7wys1rtk/1/

html:

<form>
Type Order Number:<br />
<input style='display:none;' class="jqueryShow" type='text' disabled/><input id='emailorderIDopen' class="jqueryHide" type='text' name="order" /><br />
<button id="sendemail" type="submit" class="btn btn-primary" disabled>Send Default Email</button>
</form>

jquery:

$(function() {

    var availableTags = ["26438"];

    //SET AUTO COMPLETE AND ACTIVATE SEARCH ON CLICK
    $( "#emailorderIDopen" ).autocomplete({
        source: availableTags,
        select: function(event, ui) 
        {
            $("#orderIDopen").val(ui.item.value);
            $('#sendemail').removeAttr('disabled');
            $(".jqueryHide").hide();
            $(".jqueryShow").val($(".jqueryHide").val());
            $(".jqueryShow").show();

        }

    });

});

Answer 1

You can pass the ui.item.value, which is the full item value, into your .jqueryShow element instead of the $(".jqueryHide").val(), as that only contains the text you have typed.

$(".jqueryShow").val(ui.item.value);

Fiddle fork:

http://jsfiddle.net/dmfuryra/

EDIT: Summary of question: http://jsfiddle.net/dmfuryra/1/

Answer 2

This is happening because of asynchronous process, which means when you $(".jqueryShow").val($(".jqueryHide").val()); is called $(".jqueryHide").val() holds value you typed

You can overcome it by $(".jqueryShow").val(ui.item.value);