Issue with duplicate fields and autocomplete
Hello,
I have a form with duplicate fields including autocomplete input.
The issue is : when i duplicate the fields, the autocomplete doesn't work on the new fields.
I spent time googling my issue and often it's a clone('true') issue, which i don't use already and still have the problem.
Can you help me please ?
Try with the letter j or 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 Autocomplete :
- $( 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 );
- };
- } );