Question

我尝试使用jQuery自动填充功能在评论表单下显示主持人列表，用户可以选择通知他们的评论。

评论系统是嵌套的，当用户点击＆＃34;回复＆＃34;在先前存在的注释中，主注释表单的克隆被附加到该注释。自动填充功能在主评论表单中正常工作，但不适用于任何克隆表单。这是代码的简化版本：

<form id="myForm" action="submitComment.php" method="post"   onsubmit="event.preventDefault();" >
        <table>
            <tr>
                <th class="small"> Username </th>
                <th colspan="4">
                    <span>New Post</span><br/><br/>
                    <input name="subject" class="small"  value="" placeholder="Optional subject (25 char max)." />
                </th>
            </tr>
            <tr>
                <td>User Avatar</td>
                <td colspan="4" >
                    <strong>Body</strong>
                    <br/>
                    <br/>
                    <textarea name="body" rows="4" placeholder="Comment body." > </textarea>
                    <br/>
                    <br/>
                    <input name="alert" class="alert"  value="" placeholder="Notify mod(s) (Optional) "/>
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="4" ><input id="submit" type="submit" name="submit" value="Submit"/></td>
            </tr>
        </table>
    </form>

    <div id="comments">

        <div id="comment 1" class="comment dark">                                                   
            <div class="comment-holder">
                <div class="body">Comment 1</div>
                <div class="meta">
                    USERNAME DATE <span class="reply"> REPLY</span>
                </div>
            </div>

        </div>

        <div id="comment 2" class="comment dark">                                                   
            <div class="comment-holder">
                <div class="body">Comment 2</div>
                <div class="meta">
                    USERNAME DATE <span class="reply"> REPLY</span>
                </div>
            </div>

        </div>
        <div class="spacer" style="clear: both;"></div>
    </div>

    <script>

        //Append Level 1 comment reply form
        $(document).on('click','.reply',function(e){
            if (e.target !== this)
                return;

            $(this).addClass("active");

            var form = $('#myForm').clone(true, true);
            var target = $(e.target);
            var isFormAvailable = $("#myForm", target).length > 0;
            var level = 2;

            if(!isFormAvailable) {
                $(e.target).append(form);
                $('textarea', form).focus();
                $(form).addClass("child");
                $(form).append("<span class=\"cancel\" style=\"color:red\">CANCEL</span>");
                $(".cancel").click(function(){
                    $(this).parents(".reply").removeClass("active");
                    $(this).closest(form).remove();
                });
            }
        });

        $( function() {
            var availableTags = [ "@user1", "@user2", "@user3"];
            function split( val ) {
              return val.split( /,\s*/ );
            }
            function extractLast( term ) {
              return split( term ).pop();
            }

            $( "body" )
              // don't navigate away from the field on tab when selecting an item 
              .on( "keydown click", ".alert", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).autocomplete( "instance" ).menu.active ) {
                  event.preventDefault();
                }
              })
              .autocomplete({
                minLength: 1,
                source: function( request, response ) {
                  // delegate back to autocomplete, but extract the last term 
                  response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                  // prevent value inserted on focus 
                  return false;
                },
                select: function( event, ui ) {
                  var terms = split( this.value );
                  // remove the current input 
                  terms.pop();
                  // add the selected item 
                  terms.push( ui.item.value );
                  // add placeholder to get the comma-and-space at the end 
                  terms.push( "" );
                  this.value = terms.join( ", " );
                  return false;
                }
              });
          } );
    </script>

小提琴：https://jsfiddle.net/crashTestDummy/gbLz53re/

Answer 1

尝试向新克隆的元素添加自动完成功能。

来源：https://forum.jquery.com/topic/autocomplete-to-new-appended-items

如何在克隆表单上使用jQuery自动完成多个

1 个答案: