Jquery Autocomplete Select Event get json object

Question

Hi I have an text field that implements jquery autocomplete. Everything is working great.

What I need now is in the "Select" event I want to be able to read the item json object. Right now the only two properties available are "label" and "value".

Here is the code:

$( "#txtfatherslast" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: '@Url.Content("~/Home/SearchVisitor")/',
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: "json",
                    data: JSON.stringify(
                     {
                         fathersLast: "",
                         mothersLast: "",
                         firstName: ""

                     }),
                    success: function( data ) {
                        response( $.map( data.results, function( item ) {
                            return {
                                label: item.FathersLast + " " + item.MothersLast + ", " + item.FirstName + " (" + item.OrganizationName + ")", 
                                value: item.FathersLast
                            }
                        }));
                    }
                });
            },
            minLength: 3,
            select: function( event, ui ) {
                alert(ui.item.label); // here I would like to get item.FathersLast etc...
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });

So the Select event:

 ....
    minLength: 3,
                select: function( event, ui ) {

// here i want to be able to read item.FathersLast or item.MothersLast.. is that possible?                    

alert(ui.item.label);

                },
    ...

Any clue on how can I get the json object properties in the Selected event?

Thanks

Answer 1

When you populate the autocomplete, you simply add the attribute you wish to retrieve after in the object coming from response, using the attribute values coming from the JSON obj for example:

source: function( request, response ) {
            $.ajax({
                url: '@Url.Content("~/Home/SearchVisitor")/',
                type: 'POST',
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify(
                 {
                     fathersLast: "",
                     mothersLast: "",
                     firstName: ""

                 }),
                success: function( data ) {
                    response( $.map( data.results, function( item ) {
                        return {
                            label: item.FathersLast + " " + item.MothersLast + ", " + item.FirstName + " (" + item.OrganizationName + ")", 
                            value: item.FathersLast,
                            /* edits */
                            fathersLast : item.FathersLast, //access as ui.item.fathersLast
                            mothersLast: item.MothersLast, //access as ui.item.mothersLast, etc [...]
                            firstName : item.FirstName,
                            organizationName : item.OrganizationName
                            //[...]
                        }
                    }));
                }
            });
        }