jquery - 順次オートコンプリート

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。

この種のシーケンシャル オートコンプリートは、この 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は、ユーザーのコンテキストに応じて可変です。

Answer 1

3つのタイプに対してXn回ではなく、3つのタイプに対して繰り返す必要がある場合があります

$( '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())
    }
})

デモ：フィドル

Answer 2

classforを使用して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')
    });
});

Answer 3

オートコンプリートを更新するための関数を 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つの機能を持つこともできます.

Answer 4

すべての入力を監視できます。

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