How to retrieve the selected value from jQuery Autocomplete control

Question

My code is :

<script type="text/javascript">
    var ab;
$(function() {
        $.getJSON('jsonSample.action',null,function(json) {
            ab = json.languageList;
            $("#tags").autocomplete({
                  data:ab
              });
              });
    });
    </script>

This code works fine, when i start type in textbox where i have implemented this, displays all suggestion, now the problem is i want to trigger a another event as soon as one value is selected from suggestion list... And also another question is How to get the selected value as soon as the user select from autocomplete list..

I referred the tutorial which is in stackoverflow here

 $(".tags").change(function(me) {
        alert(this.valu);
    });

This code displays the value what i typed in textbox, it is not displaying what the item i select in autocomplete..

I used another method ;

$(".tags").result(function(event, data, formatted) {
        var u = this;
        // Check value here

    });

When i check it with firebug , it says there no method found .... I want to show the item selected from auto populated list and also it have to trigger another event after i selected an item...

Thanks in advance..

Answer 1

First off, looks like you are mixing an id selector #tags with a class selector .tags.

You need to refer to the object consistently (all should be #tags). This should solve your problem.

Also, consider using jQuery's .live() method for the objects that appear in the suggestion list to assign a click handler to them.

Answer 2

I think you should use the "select" event, and access the ui.item.label for the selected value:

$("#tags").autocomplete({
    select: function(evt, ui) {
        alert("Selected: " + ui.item.label);
    }
});

Regards.