CODEWITHSUNDEEP
javascriptjqueryhtml
Robert Pounder
Robert Pounder

Reputation: 1511

jQuery Fill another textbox with autocomplete

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

        }

    });

});

Upvotes: 0

Views: 2552

Answers (2)

Starscream1984
Starscream1984

Reputation: 3062

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/

Upvotes: 3

Bhupender Keswani
Bhupender Keswani

Reputation: 1228

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

Upvotes: 0

Related Questions