Многоуровневое автозаполнение JQuery, которое не устанавливает данные для следующего уровня

У тебя почти получилось! Я вижу следующие проблемы:

1. select — это событие в виджете autocomplete. Ваш код в том виде, в каком он есть сейчас, определяет select как вариант вызова $.ajax({...});.

2. Неудачный оператор alert находится внутри функции source для виджета автозаполнения. Я предполагаю, что он появляется сразу после того, как вы начинаете печатать. Причина, по которой он пуст, заключается в том, что он не находится внутри функции select (и это происходит до вашего успешного вызова 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",
            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
});

Обратите внимание на расположение оператора alert и обработчика событий select.

Вот код для 2-го уровня штата и 3-го уровня города автозаполнения.

    //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" );
        }
    });