JQuery: Wie Autocomplete-Felder klonen?

Ich benutze Jörn Zaefferers jquery Autocomplete-Plugin, und ich kann nicht herausfinden, wie es funktioniert, wenn ich ein Autocomplete-Feld klonen. Es funktioniert fast so, dass das geklonte Autocomplete-Feld die Auswahl anzeigt, wenn ich Text eintippe, aber ich kann keine Elemente auswählen. Zuerst dachte ich, es wäre ein Browser-Kompatibilitätsproblem, aber es passiert sowohl in FF3 als auch in Safari, also vermute ich, dass es ein Problem gibt, das ich vermisst habe. HierJQuery: Wie Autocomplete-Felder klonen?

ist ein funktionierendes Beispiel dafür, was ich tue:

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

Quelle

2009-03-10 Rob

Machen

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

wie so

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

Ihr Beispiel funktioniert für mich in FF, wenn Sie don Klonen Sie keine Ereignisse auf #template.

Quelle

2009-03-10 23:31:32 james

Ich bin mir nicht sicher warum, aber das funktioniert tatsächlich. Ich habe das gleiche problematische Autocomplete-Verhalten wie zuvor beschrieben, aber in den nicht geklonten Eingabefeldern nach der Durchführung dieses Fixes - aber ich kann es nicht reproduzieren, so dass die Ereignisse von Zeit zu Zeit durcheinander geraten. – Rob

hatte das gleiche Problem, aber ich musste klonen() mit Event-Handlern, Workaround für das war zu unautocomplete() und dann AutoVervollständigen() auf Element wieder, viel einfacher als alle Event-Handler für alle Elemente erneut nach Clone() in – CountZero

zunächst:

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

so gibt es keine von dieser Linie zurück Kinder. Verwendung

$newParticipant.children()

statt. Es gibt stattdessen 1 Schild zurück. Aber Stahl funktioniert nicht für mich. Muss mehr nachdenken.

Quelle

2009-03-11 08:32:25

Guter Fang - danke, dass du darauf hingewiesen hast. – Rob

JQuery: Wie Autocomplete-Felder klonen?

Antwort

Verwandte Themen