CODEWITHSUNDEEP
jqueryjsp
RamChithra
RamChithra

Reputation: 57

how to get selected auto complete textbox value in jquery

Below is my code, how to get selected auto complete textbox value in JQuery?

<script type="text/javascript" src="JS/jquery.min.js"></script>
    <script src="JS/jquery.autocomplete.js"></script>
    <script>
             $(function() {
                $( "#data" ).autocomplete("list.jsp")

             });
      </script>  
        <script> 
             $(document).ready(function () {
                    $('#data').on('change', function () {
                        $('#d').html('You selected: ' + this.value);
                    }).change();
                    $('#data').on('autocompleteselect', function (e, ui) {
                        $('#d').html('You selected: ' + ui.item.value);
                    });
                });

          </script> 
    </head>
    <body>
    <form action="osave.jsp" name="frm" method="post">
    Customer Name <input type="text" id="data" name="cname">
    <div id="d"></div>
    </form>

Textbox autocomplete works, but cant get selected textbox value . The output is as follows:

Customer Name:usha
You selected: u

Upvotes: 1

Views: 3730

Answers (5)

palaѕн
palaѕн

Reputation: 73906

Just change ui.item.value with ui.item.label like:

$('#data').on('autocompleteselect', function (e, ui) {
   $('#d').html('You selected: ' + ui.item.label);
});

Upvotes: 0

Mukesh Kalgude
Mukesh Kalgude

Reputation: 4844

try this way

<script>
             $(function() {
                $( "#data" ).autocomplete({
                 select: function (event, ui) {
                 $('#d').html('You selected: ' + ui.value);                    
                return false;
            }

                })

             });
      </script>

Upvotes: 0

Thomas Jericho Capuyan
Thomas Jericho Capuyan

Reputation: 85

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('blur', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

try this one.

Upvotes: 0

shif
shif

Reputation: 21

To answer the question more generally, the answer is:

select: function( event , ui ) {
    alert( "You selected: " + ui.item.label );
}

Complete example :

$('#test').each(function(i, el) {
    var that = $(el);
    that.autocomplete({
        source: ['apple','banana','orange'],
        select: function( event , ui ) {
            alert( "You selected: " + ui.item.label );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Type a fruit here: <input type="text" id="test" />

Upvotes: 1

user1012506
user1012506

Reputation: 2118

When autocomplete changes a value, it fires a autocompletechange event, not the change event

$(document).ready(function () {
    $('#tags').on('autocompletechange change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});

Demo: Fiddle

Another solution is to use select event, because the change event is triggered only when the input is blurred

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

Upvotes: 0

Related Questions