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

Question

У меня работает автозаполнение для названий штатов и провинций.Я хочу передать аббревиатуру штата следующему каскаду автозаполнения.Я создал скрытый ввод и хочу установить его в качестве аббревиатуры, когда выбрано имя штата, затем я выберу аббревиатуру для использования на следующем уровне Автозаполнение, чтобы ограничить запрос города только одним штатом.На предыдущем шаге у меня есть кнопки с переключателями для страны, устанавливающие ограничение состояния в параметре .ajax data, чтобы вы могли увидеть (как правило), что я хочу сделать на этом уровне штата / города.Я пробовал несколько вещей, много занимался поиском в Google и читал книги по jQuery, но мне нужна помощь.Поле ввода stateProvince автоматически заполняется и выбирает полное имя состояния.Скрытый ввод не устанавливается с аббревиатурой.Предупреждение пусто.Я не уверен ни в успехе ajax, ни в функциях выбора ajax.Как я могу получить сокращение (не имя), чтобы быть значением скрытого ввода?и как я могу выбрать его в параметре данных следующего уровня .ajax?Вот соответствующий код.

выбранный HTML без символов тегов:

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

Источник автозаполнения 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").$(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, полученный из php:

[{"StateName ":" Алабама», "имя": "Алабама", "stateAbbrev": "AL"}, { "StateName": "Аляска", "имя": "Аляска", "stateAbbrev": "АК"}]

Answer 1

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

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.

Answer 2

Вот код для 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" );
        }
    });