-1

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 コードをリファクタリングするためのアイデアを教えてください。for ループを使用する必要がありますか?

4

2 に答える 2

0

クラスを使用したくない場合は、次のように 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!!!!
...
于 2013-02-22T15:06:13.017 に答える
0

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/

于 2013-02-22T15:21:55.857 に答える