考虑下表:
<table>
<tr>
<th>Country</th>
<th>State/Province</th>
<th>City</th>
</tr>
<tr>
<td><input name="country_1" value="" /></td>
<td><input name="stateProv_1" value="" /></td>
<td><input name="city_1" value="" /></td>
</tr>
<tr>
<td><input name="country_n" value="" /></td>
<td><input name="stateProv_n" value="" /></td>
<td><input name="city_n" value="" /></td>
</tr>
...
</table>
我想使用jQuery UI Autocomplete来帮助我的用户输入数据。 country_1
的值用于选择stateProv_1
的可能值,用于选择city_1
的可能值。
很好地解释了这种顺序自动完成by this Q&A。
我的问题涉及jQuery位本身:我必须为每个输入标记设置自动完成代码吗?
$( "country_1" ).autocomplete({ ... });
$( "stateProv_1" ).autocomplete({ ... });
$( "city_1" ).autocomplete({ ... });
...
$( "country_n" ).autocomplete({ ... });
$( "stateProv_n" ).autocomplete({ ... });
$( "city_n" ).autocomplete({ ... });
或者,自动填充(Country,StateProv,City)的每个类型是否有办法监控其所有输入?
n 是可变的,具体取决于用户上下文。
答案 0 :(得分:0)
您可以监控所有输入:
$( "input" ).autocomplete({ ... });
答案 1 :(得分:0)
您可以class
使用input
,然后将auto-complete
应用于class
。
<强> HTML 强>
<td><input class="makemeauto" name="country_1" value="" /></td>
<td><input class="makemeauto" name="stateProv_1" value="" /></td>
<td><input class="makemeauto" name="city_1" value="" /></td>
<强>的jQuery 强>
$(".makemeauto").autocomplete({ ... });
评论回复
您需要为每个元素单独调用autocomplete
:
<td><input class="makemeauto" name="country_1" value="" data-autocomplete-source ="source_country"/></td>
<td><input class="makemeauto" name="stateProv_1" value="" data-autocomplete-source ="source_stateProy"/></td>
<td><input class="makemeauto" name="city_1" value="" data-autocomplete-source ="source_city" /></td>
$('input.makemeauto').each(function()
{
$(this).autocomplete({
source: $(this).data('autocomplete-source')
});
});
答案 2 :(得分:0)
您可能需要重复3种类型,而不是3种类型X n次
$( 'input[name^="country_"]' ).autocomplete({ ... });
$( 'input[name^="stateProv_"]' ).autocomplete({ ... });
$( 'input[name^="city_"]' ).autocomplete({ ... });
您可以使用源函数中的this.element
来执行此操作
像
这样的东西$('input[name^="stateProv_"]').autocomplete({
source: function(request, term){
console.log(request, this.element);
var name = this.element.attr('name');
var idx = name.substring(10);
var elcountry = $('input[name="country_' + idx + '"]');
console.log(idx, 'c', elcountry.val())
}
})
演示:Fiddle
答案 3 :(得分:0)
您可以使用1个功能更新自动填充功能。也许给每种类型的输入一个类。
<td><input class="country" name="country_n" value="" /></td>
<td><input class="state" name="stateProv_n" value="" /></td>
<td><input class="city" name="city_n" value="" /></td>
$(function(){
$(".country").change(countryChanged);
$(".state").change(stateChanged);
});
function countryChange(){
var $countryInput = $(this);
var $stateInput = $countryInput.parent().next().children(".state");
$stateInput.autocomplete({});
}
function stateChange(){
//similar code sequence
}
您还可以使用一个开关来确定要执行的操作,具体取决于它是国家还是州等。