Form-Set에서 jQuery 자동 완성을 적용하는 방법은 무엇입니까?

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"> 

을 그리고 자동 완성 # id_form-0-city_input 입력이 JS/jQuery 코드를 사용합니다.

는

// 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 루프를 사용해야합니까?

Answer 1

당신은 당신이 클래스를 사용하지 않으려는 경우처럼, 당신의 입력에 확인해 요소를 추가 할 수 있습니다

<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"); 
    } 
    }); 
} 

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