Question

我有一个包含重复字段的表单，包括自动完成输入。问题是：当我复制字段时，自动完成功能不会对新字段起作用。我花时间搜索我的问题，而且经常是一个克隆（真正的＆＃39;）问题，我不会使用它，但仍然存在问题。你能帮我吗？非常感谢！

我做了一个JSFiddle：https://jsfiddle.net/vqnaedvx/

尝试使用字母j或s

HTML：

<div id="projects" class="content">    
    <button type="button" id="btnAdd" class="btn btn-primary btn-sm">Add Project</button>   
    <div class="row form-group group">
      <input class="project-label">
      <input type="hidden" class="project-id">
      <button type="button" class="btn btn-danger btnRemove">Remove</button>
    </div>
</div>

JS Multifield：

/**
 * jQuery Multifield plugin
 *
 * https://github.com/maxkostinevich/jquery-multifield
 */

;(function ( $, window, document, undefined ) {
    // our plugin constructor
    var multiField = function( elem, options ){
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
        // Localization
        this.localize_i18n={
        "multiField": {
          "messages": {
            "removeConfirmation": "Are you sure you want to remove this section?"
          }
        }
      };

        this.metadata = this.$elem.data( 'mfield-options' );
    };

    // the plugin prototype
    multiField.prototype = {

        defaults: {
            max: 0,
            locale: 'default'
        },


        init: function() {
            var $this = this; //Plugin object
            // Introduce defaults that can be extended either
            // globally or using an object literal.
            this.config = $.extend({}, this.defaults, this.options,
                this.metadata);

            // Load localization object
      if(this.config.locale !== 'default'){
            $this.localize_i18n = this.config.locale;
      }

            // Hide 'Remove' buttons if only one section exists
            if(this.getSectionsCount()<2) {
                $(this.config.btnRemove, this.$elem).hide();
            }

            // Add section
            this.$elem.on('click',this.config.btnAdd,function(e){
                e.preventDefault();
                $this.cloneSection();
            });

            // Remove section
            this.$elem.on('click',this.config.btnRemove,function(e){
                e.preventDefault();
                var currentSection=$(e.target.closest($this.config.section));
                $this.removeSection(currentSection);
            });

            return this;
        },


        /*
         * Add new section
         */
        cloneSection : function() {
            // Allow to add only allowed max count of sections
            if((this.config.max!==0)&&(this.getSectionsCount()+1)>this.config.max){
                return false;
            }

            // Clone last section
            var newChild = $(this.config.section, this.$elem).last().clone().attr('style', '').attr('id', '').fadeIn('fast');


            // Clear input values
            $('input[type=text],input[type=hidden],textarea', newChild).each(function () {
                $(this).val('');
            });

            // Fix radio buttons: update name [i] to [i+1]
            newChild.find('input[type="radio"]').each(function(){var name=$(this).attr('name');$(this).attr('name',name.replace(/([0-9]+)/g,1*(name.match(/([0-9]+)/g))+1));});
            // Reset radio button selection
            $('input[type=radio]',newChild).attr('checked', false);

            // Clear images src with reset-image-src class
            $('img.reset-image-src', newChild).each(function () {
                $(this).attr('src', '');
            });

            // Append new section
            this.$elem.append(newChild);

            // Show 'remove' button
            $(this.config.btnRemove, this.$elem).show();
        },

        /*
         * Remove existing section
         */
        removeSection : function(section){
            if (confirm(this.localize_i18n.multiField.messages.removeConfirmation)){
                var sectionsCount = this.getSectionsCount();

                if(sectionsCount<=2){
                    $(this.config.btnRemove,this.$elem).hide();
                }
                section.slideUp('fast', function () {$(this).detach();});
            }
        },

        /*
         * Get sections count
         */
        getSectionsCount: function(){
            return this.$elem.children(this.config.section).length;
        }

    };

    multiField.defaults = multiField.prototype.defaults;

    $.fn.multifield = function(options) {
        return this.each(function() {
            new multiField(this, options).init();
        });
    };

})( jQuery, window, document );

$('#projects').multifield({
  section: '.group',
  btnAdd:'#btnAdd',
  btnRemove:'.btnRemove'
});

JS自动填充：

   $( function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS"
      }
    ];

    $( ".project-label" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( ".project-label" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( ".project-label" ).val( ui.item.label );
        $( ".project-id" ).val( ui.item.value );


        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "</div>" )
        .appendTo( ul );
    };
  } );

Answer 1

你有2个probs： 1.您的代码仅适用于一个输入文本字段。如果你添加更多的文本字段，文本字段的所有值将具有相同的值。你需要在autocomplete中致电foreach 2.在你按下添加输入jquery后不再调用自动完成（新输入没有自动完成）。因此，您需要在添加新输入后调用它。固定在这里：声明全局函数：

    /**
 * jQuery Autocomplete
 */


  $( function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS"
      }
    ];
 refreshAuto = function(){
 $(".project-label").each(function(idx,ele){
  var item = $(ele);
    item.autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        item.val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        item.val( ui.item.label );        
                item.attr('id',ui.item.value);

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "</div>" )
        .appendTo( ul );
    };
    });
 }
 refreshAuto(); // call to init once
  } );

在“jQuery Multifield插件”中找到'//添加部分'添加行：

// Add section
        this.$elem.on('click',this.config.btnAdd,function(e){
            e.preventDefault();
            $this.cloneSection();
            refreshAuto(); //call autocomplete new input
        });

希望这有帮助！

jQuery - 重复字段＆amp;自动完成

1 个答案: