숨겨진 필드에 쓰는 끝이없는 입력 필드

Question

무한한 양의 입력 상자의 값으로 숨겨진 필드를 채우는 jquery 솔루션을 찾고 있습니다. 숨겨진 필드의 값은 ';'로 구분해야합니다. 항상 빈 입력 필드가 있어야합니다. 이 입력 필드에 값을 입력하면 새 입력란이 나타납니다. 한 필드가 비면 다른 빈 필드는 사라집니다.

이 작업을 수행 할 수있는 플러그인을 사용할 수 있다면 올바른 방향으로 나를 가리킬 수 있다면 매우 행복 할 것입니다.

그동안 나는 해답을 같이 게시했습니다.

Answer 1

아래 코드는 클래스가 적용되는 모든 <input type="hidden" /> 필드에 대해이 논리를 적용합니다. 가장 멋진 코드는 아닐지도 모르지만 내가 원하는대로 수행합니다. :-)

$("input[type='hidden'].endlessinput").each(function (i, n) { 
    $parent = $(n).parent(); 
    $br = $('<br />'); 
    // define a textbox for each value and add an additional empty one 
    var createInput = function() { 
     var input = $('<input id="'+guid()+'" type="text" value="" />'); 
     input.unbind('keyup'); 
     input.bind('keyup', function() { 
      // rebuild the array with values 
      var arr = []; 
      $("input[type='text']", $parent).each(function (k, y) { 
       arr.push($(y).val()); 
      }); 
      $(n).attr('value', arr.join(';')); 
      // Add another input field if no empty one is available 
      emptyInputs = $('input:text[value=""]', $parent).filter(function (o, p) { return $(p).val() == '' }); 
      if (emptyInputs.length == 0) { 
       $($("br", $parent).last().length > 0 ? $("br", $parent).last()[0] : $(n)).after(createInput(), "<br />"); 
      } else if (emptyInputs.length > 1) { 
       emptyInputs.not(':first').each(function (ix, inp) { 
        $(inp).next('br').remove() 
        $(inp).remove(); 
       }); 
      } 
     }); 
     return input; 
    } 

    // get values in an array 
    var values = $(n).val().split(';'); 
    $(values).each(function (j, x) { 
     var newInput = createInput(); 
     newInput.attr('value', x); 
     $($("br", $parent).last().length > 0 ? $("br", $parent).last()[0] : $(n)).after(newInput, "<br />"); 
    }); 
    $($("br", $parent).last().length > 0 ? $("br", $parent).last()[0] : $(n)).after(createInput(), "<br />"); 
});