Javascript 如何在表单集中应用jQuery自动完成？

我一直在思考如何将JS代码应用于表单集

我有这个HTML：

<input id="id_form-0-city" name="id_form-0-city" type="hidden">
<input id="id_form-0-city_input" name="id_form-0-city_input">

上面的代码非常有效，但现在我需要在这种情况下使用自动完成代码：

<input id="id_form-0-city" name="id_form-0-city" type="hidden">
<input id="id_form-0-city_input" name="id_form-0-city_input">

<input id="id_form-1-city" name="id_form-0-city" type="hidden">
<input id="id_form-1-city_input" name="id_form-0-city_input">

<input id="id_form-2-city" name="id_form-0-city" type="hidden">
<input id="id_form-2-city_input" name="id_form-0-city_input">

<input id="id_form-3-city" name="id_form-0-city" type="hidden">
<input id="id_form-3-city_input" name="id_form-0-city_input">

<input id="id_form-4-city" name="id_form-0-city" type="hidden">
<input id="id_form-4-city_input" name="id_form-0-city_input">

...
...

...
...

集合的数量可以是最少1个，最多10个

---

你能给我一些重构JS/jQuery代码以使用表单集的想法吗？我需要使用for循环？

如果不想使用类，可以在输入中添加rel元素，如：

<input id="id_form-0-city" name="id_form-0-city" type="hidden">
<input id="id_form-0-city_input" name="id_form-0-city_input" rel="autocomplete">

<input id="id_form-1-city" name="id_form-0-city" type="hidden">
<input id="id_form-1-city_input" name="id_form-0-city_input" rel="autocomplete">

<input id="id_form-2-city" name="id_form-0-city" type="hidden">
<input id="id_form-2-city_input" name="id_form-0-city_input" rel="autocomplete">

<input id="id_form-3-city" name="id_form-0-city" type="hidden">
<input id="id_form-3-city_input" name="id_form-0-city_input" rel="autocomplete">

<input id="id_form-4-city" name="id_form-0-city" type="hidden">
<input id="id_form-4-city_input" name="id_form-0-city_input" rel="autocomplete">

只需使用for循环

var inputLength = $('input:not(input[type="hidden"])').length; //find non-hidden inputs

for(var a = 0; a<inputLength; a++){
   // Autocomplete stuff  
    $( "#id_form-" + a + "-city_input" ).autocomplete({  // mudar!!!!
    source: function( request, response ) {
        $.ajax({
            url: "/internalapi/cidades/",
            dataType: "json",
            data: {
                country: $('#id_country').find(":selected").val(),
                term: request.term.toLowerCase()
            },
            success: function( data ) {
                response($.map(data, function( item ) {    
                    return {
                        label: item.name + " (" + item.zone + ", " + item.municipality + ")",
                        value: item.name,
                           id: item.id
                    }     
                }));
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
        var selectedObj = ui.item;
        // Popular o campo id_city
        $( "#id_form-" + a + "-city" ).val(selectedObj.id);
    },
    search: function(event, ui) { 
        $("#id_form-" + a + "-city_input").addClass( "ui-autocomplete-loading" ); // mudar!!!!!
    },
    open: function() {
        $("#id_form-" + a + "-city_input").removeClass( "ui-autocomplete-loading" ); // mudar!!!!
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
    }); 
}

var-inputLength=$（'input:not（input[type=“hidden”]））.length//查找非隐藏输入
对于（var a=0；a为什么不将一个类应用于每个输入，然后使用您的代码，而是将
$（“#id_form-0-city_input”）.autocomplete（）
更改为
$（“.class”）.autocomplete（）
？还将
$（“#id_form-0-city_input”）的实例更改为
$（this.prev（）
。为什么不直接使用类呢？
$("input[rel='autocomplete']").autocomplete({  // mudar!!!!
...

var inputLength = $('input:not(input[type="hidden"])').length; //find non-hidden inputs

for(var a = 0; a<inputLength; a++){
   // Autocomplete stuff  
    $( "#id_form-" + a + "-city_input" ).autocomplete({  // mudar!!!!
    source: function( request, response ) {
        $.ajax({
            url: "/internalapi/cidades/",
            dataType: "json",
            data: {
                country: $('#id_country').find(":selected").val(),
                term: request.term.toLowerCase()
            },
            success: function( data ) {
                response($.map(data, function( item ) {    
                    return {
                        label: item.name + " (" + item.zone + ", " + item.municipality + ")",
                        value: item.name,
                           id: item.id
                    }     
                }));
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
        var selectedObj = ui.item;
        // Popular o campo id_city
        $( "#id_form-" + a + "-city" ).val(selectedObj.id);
    },
    search: function(event, ui) { 
        $("#id_form-" + a + "-city_input").addClass( "ui-autocomplete-loading" ); // mudar!!!!!
    },
    open: function() {
        $("#id_form-" + a + "-city_input").removeClass( "ui-autocomplete-loading" ); // mudar!!!!
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
    }); 
}