Question

我坚持认为如何将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">

我使用这个JS / jQuery代码自动完成＃id_form-0-city_input输入。

    // Autocomplete stuff  
    $( "#id_form-0-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-0-city" ).val(selectedObj.id);
        },
        search: function(event, ui) { 
            $("#id_form-0-city_input").addClass( "ui-autocomplete-loading" ); // mudar!!!!!
        },
        open: function() {
            $("#id_form-0-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" );
        }
    });

上面的代码效果很好，但现在我需要在这种情况下使用这个自动完成代码：

<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代码以使用formset吗？我需要使用for循环吗？

Answer 1

如果您不想使用类，可以在输入中添加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">

然后只需在此

中添加自动完成逻辑

$("input[rel='autocomplete']").autocomplete({  // mudar!!!!
...

Answer 2

只需使用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" );
    }
    }); 
}

样本： http://jsfiddle.net/NcTpj/10/

如何在Form-Set中应用jQuery自动完成？

2 个答案: