javascript - JQuery: How to clone autocomplete fields?

I am using Jörn Zaefferer's jquery autoplete plugin, and I can't seem to figure out how to make it work when I clone an autoplete field. It almost works, in that the cloned autoplete field displays the choices when the I type in text, but I cannot select items. At first I thought it was a browser-patibility issue, but it happens in both FF3 and Safari, so I'm guessing there's a gotcha I've missed.

Here is a working example of what I'm doing:

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

        $(".user_selector").autoplete(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");
        setAutoplete();
    }

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

    });
</script>

</head>
<body>
<h1>Test Autoplete 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>

Here is a working example of what I'm doing:

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

        $(".user_selector").autoplete(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");
        setAutoplete();
    }

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

    });
</script>

</head>
<body>
<h1>Test Autoplete 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>

Share asked Mar 10, 2009 at 20:47 Rob 5,62211 gold badges43 silver badges45 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

Make

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

like so

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

Your example works for me in FF when you don't clone events on #template.

first of all:

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

so there is no children returned by this line. Use

$newParticipant.children()

instead. It returns 1 chield instead. But steel don't work for me. Have to think more.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745068533a4609403.html

javascript - JQuery: How to clone autocomplete fields? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - JQuery: How to clone autocomplete fields? - Stack Overflow

2 Answers 2

相关推荐