StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to apply jQuery auto-complete in a Form-Set?
text
Body
copied!<p>I'm stick at my thinking on how to apply a JS code to a form-set.</p> <p>I've this HTML:</p> <pre><code><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"> </code></pre> <p>And I use this JS/jQuery code to auto-complete the #id_form-0-city_input input.</p> <pre><code> // 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" ); } }); </code></pre> <p>The code above works great, but now I need to use this auto-complete code for this case:</p> <pre><code><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"> ... ... </code></pre> <p>The number of sets could be minimum 1 and maximum 10.</p> <p>Can you give me some ideas to refactor the JS/jQuery code to work with formsets? A for loop is what I need to use?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload