如何在表單集中應用jQuery自動完成？

-1

我堅持我的思考如何將JS代碼應用於表單集。如何在表單集中應用jQuery自動完成？

我有這個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循環是我需要使用的？

來源

2013-02-22 André

爲什麼不只是將一個類應用於每個輸入，然後使用您的代碼，但將'$（「＃id_form-0-city_input」）.autocomplete（）'更改爲'$（「.class」）.autocomplete（）'？同樣'$（「＃id_form-0-city_input」）的實例將它更改爲$（this）.prev（）'。 – Dom 2013-02-22 14:56:47

你可以一個相對元素添加到您的輸入，如果你不想使用類，如：

<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-22 15:06:13 FMontano

爲什麼不直接使用一個類呢？ – Dom 2013-02-22 15:15:01

只需使用自動完成邏輯一個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"); 
    } 
    }); 
}

DEMO： http://jsfiddle.net/NcTpj/10/

來源

2013-02-22 15:21:55 Dom

如何在表單集中應用jQuery自動完成？

回答

相關問題