3
J'utilise le plugin jquery autocomplete de Jörn Zaefferer, et je n'arrive pas à comprendre comment le faire fonctionner quand je clone un champ de saisie semi-automatique. Cela fonctionne presque, car le champ de saisie semi-automatique cloné affiche les choix lorsque je tape du texte, mais je ne peux pas sélectionner des éléments. Au début, je pensais que c'était un problème de compatibilité avec le navigateur, mais cela se produit à la fois dans FF3 et Safari, donc je suppose qu'il y a une erreur que j'ai ratée.JQuery: Comment cloner des champs de saisie semi-automatique?
Voici un exemple concret de ce que je fais:
<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>
Je ne sais pas pourquoi, mais cela fonctionne vraiment. J'ai rencontré le même comportement d'auto-complication problématique décrit plus haut, mais dans les boîtes de saisie non-clonées après avoir fait ce correctif - mais je n'arrive pas à le reproduire maintenant donc je suppose que les événements se gâtent de temps en temps. – Rob
avait le même problème, mais je devais cloner() avec les gestionnaires d'événements, contournement pour cela était à unautocomplete() et ensuite autocomplete() sur l'élément encore une fois, beaucoup plus facile que reconçoir tous les gestionnaires d'événements pour tous les éléments après clone() – CountZero