我有州名和省名的自动填充功能。我想将状态缩写传递给下一个自动完成级联。我创建了一个隐藏的输入，我想在选择状态名称时将其设置为缩写，然后我将选择在下一层自动完成中使用的缩写，以将城市查询限制为仅一个状态。在前面的步骤中，我有国家单选按钮在.ajax数据选项中设置状态限制，因此您可以（通常）看到我想在此州/城市层中执行的操作。我尝试了很多东西，做了很多谷歌搜索和阅读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
});
从php返回的JSON示例：
[{ “Statename的”： “阿拉巴马”， “名称”： “阿拉巴马”， “stateAbbrev”： “AL”}，{ “Statename的”： “阿拉斯加”， “名称”： “阿拉斯加”， “stateAbbrev” ：“AK”}]
答案 0 :(得分：1)
你差不多了！我看到以下问题：
select是autocomplete小部件上的一个事件。您现在的代码是将select定义为$.ajax({...});调用的选项。
失败的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事件处理程序的位置。
答案 1 :(得分：0)
以下是自动填充的二维状态层和三维城市层的代码。
//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" );
}
});