顺序自动完成

Question

考虑下表：

<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({ ... }); 

还是有每个型自动完成的（国家，StateProv，市）来监视其所有输入的方式吗？

n根据用户上下文而变化。

Answer 1

您可能需要重复它的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

Answer 2

可以监视所有输入：

$("input").autocomplete({ ... }); 

Answer 3

可以使用class为input，然后应用到auto-completeclass。

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

Answer 4

您可以使用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 
} 

你也可以拥有1个功能与确定取决于它是否是一个国家或国家等