JQuery : 자동 완성 필드를 복제하는 방법은 무엇입니까?

Jörn Zaefferer의 jquery autocomplete 플러그인을 사용하고 있는데 자동 완성 필드를 복제 할 때 어떻게 작동시키는 지 알 수 없습니다. 복제 된 자동 완성 필드는 텍스트를 입력 할 때 선택 항목을 표시하지만 항목을 선택할 수는 없다는 점에서 거의 효과가 있습니다. 처음에는 브라우저 호환성 문제라고 생각했지만 FF3과 Safari에서 모두 발생하므로 놓친 잡기가있는 것 같습니다. 여기 JQuery : 자동 완성 필드를 복제하는 방법은 무엇입니까?

내가 뭘하는지의 작업 예입니다

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Autocomplete Clone Demo</title> 
<style> 
body { 
margin: 40px; 
} 
.hide_element { 
display: none; 
} 
</style> 
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
<script type="text/javascript"> 
    function setAutocomplete() 
    { 
     var users = [ 
      { name: "Fred", id: "1" }, 
      { name: "Barney", id: "2" }, 
      { name: "Wilma", id: "3" } 
     ]; 

     $(".user_selector").autocomplete(users, 
      { 
       mustMatch: true, 
       matchContains: true, 
       minChars: 2, 
       formatResult: function(row) { return row.name; }, 
       formatItem: function(row, i, max) { return row.name; } 
      } 
     ); 
    } 

    var current= 0; 

    var addParticipantFields = function() 
    { 
     current++; 
     $newParticipant = $("#template").clone(true); 
     $newParticipant.removeAttr("id"); 
     $newParticipant.removeClass("hide_element"); 
     $prefix = "extra" + current; 
     $newParticipant.children("div").children(":input").each(function(i) { 
      var $currentElem= $(this); 
      $currentElem.attr("name",$prefix+$currentElem.attr("name")); 
     }); 
     $newParticipant.appendTo("#participantsField"); 
     setAutocomplete(); 
    } 

    $(document).ready(function() { 
     setAutocomplete(); 
     $("#addParticipant").live("click", addParticipantFields); 

    }); 
</script> 

</head> 
<body> 
<h1>Test Autocomplete Cloning</h1> 
<form id="demo" method="post" action=""> 
<fieldset id="participantsField"> 
<label>Participants</label> 
<div class="participant"> 
    <input class="user_selector" name="user" size="30"/> 
</div> 
</fieldset> 

<!-- This is the template for adding extra participants --> 
<div class="participant hide_element" id="template"> 
    <input class="user_selector" name="_user" size="30"/> 
</div> 

<p><input type="button" id="addParticipant" value="Add Another Participant"></p> 
<p><input class="button" type="submit" value="Submit"/></p> 
</form> 
</body> 
</html>

출처

2009-03-10 Rob

확인 그래서

$newParticipant = $("#template").clone();

귀하의 예는 FF에서 나를 위해 작동과 같은

$newParticipant = $("#template").clone(true);

때 돈 #template에서 이벤트를 복제하지 마십시오. 모든

출처

2009-03-10 23:31:32 james

이유는 확실하지 않지만 실제로 작동합니다. 이전에 설명한 것과 동일한 문제가있는 자동 완성 동작이 발생했지만이 수정을 수행 한 후 복제되지 않은 입력 상자에서 발생했습니다. 그러나 지금은 복제 할 수 없어서 이벤트가 때때로 엉망이 될 것 같습니다. – Rob

같은 문제가 있었지만 이벤트 처리기로 clone()을 수행해야했지만 그 해결 방법은 unautocomplete() 및 autocomplete()를 사용하여 clone()을 수행 한 후 모든 요소에 대한 모든 이벤트 핸들러를 다시 검색하는 것보다 훨씬 쉽습니다. – CountZero

첫째 :

$newParticipant.children("div").children(":input").length == 0

때문에이 라인에 의해 반환 된 아이가 없다. 사용

$newParticipant.children()

대신에. 대신 1 개의 방어막을 반환합니다. 그러나 강철은 저를 위해 작동하지 않는다. 더 생각해야합니다.

출처

2009-03-11 08:32:25

좋은 캐치 - 그것을 지적 해 주셔서 감사합니다. – Rob

JQuery : 자동 완성 필드를 복제하는 방법은 무엇입니까?

답변

관련 문제