Jquery 顺序自动完成

考虑下表：

<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>

或者，每种类型的自动完成（国家、州、城市）是否有一种方法来监控其所有输入

---

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

您可以监视所有输入：

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

---

您可以使用

类

进行

输入

，然后将

自动完成

应用于

类

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>

评论回复

您需要为每个元素分别调用

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

$（'input.makemeauto'）。每个（函数（）
{
$（此）。自动完成({
来源：$（this）.data（'autocomplete-source'）
});
});

您可能需要对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())
    }
})

---

演示：

您可以有一个更新自动完成的功能。可能给每种类型的输入一个类

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

$（函数（）{
美元（“.country”）。更改（countryChanged）；
$（“.state”）.change（stateChanged）；
});
函数countryChange（）{
变量$countryInput=$（此）；
var$stateInput=$countryInput.parent（）.next（）.children（“.state”）；
$stateInput.autocomplete（{}）；
}
函数stateChange（）{
//相似码序列
}

---

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

那么如何将

stateProv\u 2

的自动完成查询限制为仅使用

country\u 2

中的值？@并且您可以使用

开关
或
if
来获取它的
文本框
当前指向并根据该请求发出一个
请求
.ahh，包括一个额外的数据以将每个输入链接回其父输入。聪明！请参阅我对Dipesh的评论。您正在使用
源代码
功能，不是吗？
$('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())
    }
})

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