1

考虑下表：

<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 自动完成来帮助我的用户输入数据。的值用于country_1选择可能的值 用于stateProv_1选择 的可能值city_1。

这个 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是可变的，具体取决于用户上下文。

4

4 回答 4

0

您可以监控所有输入：

$( "input" ).autocomplete({ ... });
于 2013-03-20T03:22:04.463 回答
0

您可以使用classforinput然后应用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')
    });
});
于 2013-03-20T03:26:54.267 回答
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())
    }
})

演示：小提琴

于 2013-03-20T03:30:22.960 回答
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
}

您还可以有一个带有开关的功能，该开关根据它是一个国家还是一个州等来确定要做什么。

于 2013-03-20T03:34:19.610 回答