jQuery Autocomplete select: function not working

Question

This seems so simple, yet I cannot seem to get it to work:

var options, a;
jQuery(function(){
  options = { 
  serviceUrl:'ajax/parts_by_partno.php', 
  select: function(event, ui) { 
    $("#hiddenId").val(ui.item.id); 
    }
  };
  a = $('#fieldWithData').autocomplete(options);
});

Once the item is selected from the auto complete list, I want #hiddenId to change its value to the ID of the item selected:

$("#hiddenId").val(ui.item.id); 

I've even tried to just change #hiddenId to something static like this:

$("#hiddenId").val('test'); 

Nothing changed. What am I doing wrong?

Answer 1

have look on this code..hope it will help u

$('#selector').autocomplete({
    source: url,
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input
    }
});

$('#button').click(function() {
    alert($("#txtAllowSearchID").val(); // get the id from the hidden input
}); 

Answer 2

Here is a full blog entry on how to use the autocomplete module

Basically, you need to add a callback when the select value is changed, like this:

 select: function(e, ui) {  

        //create formatted friend  
        var friend = ui.item.value,  
            span = $("<span>").text(friend),  
            a = $("<a>").addClass("remove").attr({  
                href: "javascript:",  
                title: "Remove " + friend  
            }).text("x").appendTo(span);  

            //add friend to friend div  
            span.insertBefore("#to");  
        },  

        //define select handler  
        change: function() {  

            //prevent 'to' field being updated and correct position  
            $("#to").val("").css("top", 2);  
        }  
    });