如何在表单集中应用 jQuery 自动完成功能？答案

【问题标题】：How to apply jQuery auto-complete in a Form-Set?如何在表单集中应用 jQuery 自动完成功能？
【发布时间】：2013-02-08 05:14:00
【问题描述】：

我一直在思考如何将 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 循环吗？

【问题讨论】：

为什么不对每个输入应用一个类，然后使用您的代码，而是将$( "#id_form-0-city_input" ).autocomplete() 更改为$( ".class" ).autocomplete()？ $("#id_form-0-city_input") 的实例也将其更改为 $(this).prev()。

标签： javascript jquery formsets

【解决方案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!!!!
...

【讨论】：

那为什么不直接使用类呢？

【解决方案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/

【讨论】：