JQuery tiered Autocomplete that does not set data for the next tier

I have an Autocomplete for state and province names running. I want to pass the state abbreviation to the next cascade of Autocomplete. I created a hidden input and I want to set it to the abbreviation when the state name is selected, then I'll select the abbreviation for use in the next tier Autocomplete to limit the city query to one state only. At a prior step, I have country radio buttons setting a state limit in the .ajax data option, so you can see (generally) what I want to do in this state/city tier. I've tried several things, done a lot of Google searching and reading jQuery books, but I need some help. The stateProvince input box autocompletes and selects the full state name. The hidden input does not get set with the abbreviation. The alert is empty. I'm not sure about either the ajax success or the ajax select functions. How do I get the abbreviation (not the name) to be the value of the hidden input? and how can I then select it in the next tier's .ajax data option? Here is the relevant code.

selected HTML without tag symbols:

input type="text" id="stateProvince" name="stateProvince" size="50" maxlength="50" input type="hidden" id="hiddenState" name="hiddenState"

Autocomplete source ajax;

    $("#stateProvince").autocomplete
    ({
        source: function( request, response )
        {                           
            //Pass the selected country to the php to limit the stateProvince selection to just that country  
            $.ajax(
            {
                url: "getStateProvince.php",
                data: {
                        term: request.term, 
                        country: $('input[name=country]:checked').val()    //Pass the selected country to php
                      },       
                type: "POST", 
                dataType: "json"开发者_如何学C,
                success: function( data )
                {                                          
                    response( $.map( data, function( item )
                    {
                        return{                                   
                                label: item.stateName,
                                value: item.name,
                                abbrev: item.stateAbbrev                                                                   
                               }
                    }));
                },
                select: function( event,ui )
                {
                $(this).val(ui.item.value);
                $("#hiddenState").$(this).val(ui.item.abbrev);
                }
            });
            alert('|' + $("#hiddenState").val() + '|2nd');  //doesn't trigger here; shows no content when placed in the next tier Autocomplete              
        },           
        minLength: 2
    });

JSON example returned from php:

[{"stateName":"Alabama","name":"Alabama","stateAbbrev":"AL"},{"stateName":"Alaska","name":"Alaska","stateAbbrev":"AK"}]

You've almost got it! I see the following problems:

1. select is an event on the autocomplete widget. Your code as it is right now is defining select as an option to the $.ajax({...}); call.

2. The alert statement that's failing is inside the source function to the autocomplete widget. I'm guessing it pops up right after you start typing. The reason it's empty is because it is not inside the select function (and it takes place before your AJAX call comes back successfully).

You can tweak your code as follows:

$("#stateProvince").autocomplete
({
    source: function( request, response )
    {                           
        //Pass the selected country to the php to limit the stateProvince selection to just that country  
        $.ajax(
        {
            url: "getStateProvince.php",
            data: {
                    term: request.term, 
                    country: $('input[name=country]:checked').val()    //Pass the selected country to php
                  },       
            type: "POST", 
            dataType: "json",
            success: function( data )
            {                                          
                response( $.map( data, function( item )
                {
                    return{                                   
                            label: item.stateName,
                            value: item.name,
                            abbrev: item.stateAbbrev                                                                   
                           }
                }));
            }
        });             
    },      
    select: function( event,ui )
    {
        $(this).val(ui.item.value);
        $("#hiddenState").val(ui.item.abbrev);
        alert('|' + $("#hiddenState").val() + '|2nd');  //doesn't trigger here; shows no content when placed in the next tier Autocomplete 
    },     
    minLength: 2
});

Note the location of the alert statement and the select event handler.

Here is the code for both the 2d state tier and 3d city tier of the Autocomplete.

    //2d tier - stateProvince: autocomplete selection
    //set the country for the 2nd tier to select stateProvince from only the country selected in the 1st tier         
    $("#stateProvince").autocomplete
    ({ 
        source: function( request, response )
        {                          
            //Pass the selected country to the php query manager to limit the stateProvince selection to just that country                                               
            $.ajax(
            { 
                url: "getStateProvince.php",
                data: {
                        term: request.term,   
                        country: $('input[name=country]:checked').val()    //Pass the selected country to php
                      },        
                type: "POST",  // a jQuery ajax POST transmits in querystring format in utf-8
                dataType: "json",   //return data in json format                                                                                                                                                        
                success: function( data ) 
                {                                           
                    response( $.map( data, function( item ) 
                    {
                        return{                                    
                                label: item.stateName,
                                value: item.name,
                                abbrev: item.stateAbbrev                                                                    
                               }
                    }));
                }
            });
        },
        select: function( event,ui )
        {
            $(this).val(ui.item.value);
            $("#hiddenState").val($(this).val(ui.item.abbrev));
            //alert('|' + $("#hiddenState").val() + '|1st');  //shows [object,Object] 
        },      
        minLength: 2
    });

    //3d tier - city: autocomplete selection  //                        
    $( "#city" ).autocomplete
    ({                 
        source: function( request, response ) 
        {              
            $.ajax(
            {
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: 
                {
                    featureClass: "P",
                    country: $('input[name=country]:checked').val(),
                    adminCode1: $("#hiddenState").val(), //"AK", //works-delivers only Alaska towns.
                    style: "full",
                    maxRows: 10,
                    name_startsWith: request.term
                },

                success: function( data ) 
                {
                    response( $.map( data.geonames, function( item ) 
                    {
                        return{
                                label: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : "")
                               }
                    }));
                }
            });
        },
        select: function( event, ui ) 
            {
                $(this).val(ui.item.value);
                //ui.item.option.selected = true;
                //self._trigger( "selected", event, {item: ui.item.option});
            },  //combo box demo uses this to bar illegal input. Other things are needed also. item.option is not defined
        minLength: 2,


        open: function() 
        {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() 
        {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });