Jquery ui 不为下一层设置数据的JQuery分层自动完成

我有一个自动完成的州和省的名称运行。我想把州的缩写传递给下一个自动完成的级联。我创建了一个隐藏输入，我想在选择州名称时将其设置为缩写，然后我将选择缩写以在下一层自动完成中使用，以将城市查询限制为仅一个州。在前面的步骤中，我在.ajax数据选项中设置了国家/地区单选按钮，这样您就可以（通常）看到我想在这个州/城市层中做什么。我尝试了很多方法，做了很多谷歌搜索和阅读jQuery书籍，但我需要一些帮助。州省输入框自动完成并选择州全名。隐藏输入未设置缩写。警报为空。我不确定ajax的成功与否，也不确定ajax选择函数的成功与否。如何将缩写（而不是名称）作为隐藏输入的值？然后我如何在下一层的.ajax数据选项中选择它？这是相关代码

不带标记符号的选定HTML：

输入type=“text”id=“stateProvince”name=“stateProvince”size=“50”maxlength=“50” 输入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
    });

从php返回的JSON示例：

---

[{“州名”：“阿拉巴马”，“州名”：“阿拉巴马”，“州名”：“阿尔”}，{“州名”：“阿拉斯加州”，“州名”：“阿拉斯加州”，“州名”：“阿克”}]

你几乎成功了！我看到以下问题：

select

是

autocomplete

小部件上的事件。您现在的代码正在定义

select

作为

$.ajax（{…}）的一个选项呼叫

失败的

警报

语句位于自动完成小部件的

源

函数中。我猜它会在你开始打字后弹出。它为空的原因是它不在

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

---

请注意

警报

语句和

选择

事件处理程序的位置。

您几乎找到了它！我看到以下问题：

select

是

autocomplete

小部件上的事件。您现在的代码正在定义

select

作为

$.ajax（{…}）的一个选项呼叫

失败的

警报

语句位于自动完成小部件的

源

函数中。我猜它会在你开始打字后弹出。它为空的原因是它不在

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

---

请注意

警报

语句和

选择

事件处理程序的位置。

以下是自动完成的2d状态层和3d城市层的代码

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

---

以下是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" );
        }
    });

---

安德鲁，谢谢你的帮助。警报现在会触发并给出[object，object]。我在下一层有另一个警报，上面写着同样的内容。然而，州缩写并没有进入下一层。（如果我“硬编码”了一个州缩写，它就可以工作了）在select函数中，我尝试了ui.item.abbrev、ui.item.stateAbbrev和ui.item[2]。我无法判断问题是在隐藏输入中设置值还是获取值。我如何调试它？@Mike_Laird:我注意到

select

事件处理程序中有一个错误，我将更新我的answer@Mike_Laird：此外，如果您在Firefox中使用Firebug，您可以设置一个断点并检查

ui.item

的值，以查看

abbrev

属性是否存在。@Andrew Whitaker:abbrev行中成功的断点显示正确的abbrev状态。select中警报上的断点将显示abbrev。通常，“选择”会在框中显示状态名称。因此，我相信hiddenState输入设置正确。我在Firebug中找不到ui.item.abbrev或隐藏输入的值，无法直接读取。也许你可以建议去哪里看看。我目前的问题预感是在3d层获取隐藏数据。我有一个数据：行非常类似于上面的一个。adminCode1：“AK”，创建响应。adminCode1:$（“#hiddenState”）.val（），fails@Mike_Laird：您实际上可以直接在控制台中键入jQuery选择器。因此，如果您键入

$（#hiddenState”）.val（）

，您应该会得到州的缩写。如果这返回了您所期望的结果，也许在您的问题中添加不起作用的代码会有所帮助。Andrew，感谢您的帮助。警报现在会触发并给出[object，object]。我在下一层中有另一个警报，它显示的是相同的。但是，状态缩写没有传递到下一层。（如果我对状态缩写进行“硬编码”，它会起作用）在select函数中，我尝试了ui.item.abbrev、ui.item.stateAbbrev和ui.item[2]。我不知道问题是在隐藏输入中设置值还是获取值。我如何调试它？@Mike_Laird:我注意到

select

事件处理程序中有一个错误，我将更新我的answer@Mike_Laird：此外，如果您在Firefox中使用Firebug，可以设置断点并检查

ui.item

的值e如果存在

abbrev

属性。@Andrew Whitaker:abbrev行中的断点成功显示正确的状态abbrev。select中警报上的断点显示abbrev。通常，select会在框中显示状态名称。因此我认为hiddenState输入设置正确。我找不到ui.item.abbrev或值o如果你想直接阅读Firebug资料中隐藏的输入。也许你可以建议去哪里看。我目前的问题预感是在3d层