Apply jQuery autocomplete to the cloned element

Question

I am using jQuery autocomplete , which works fine with an existing element, but not with a dynamically added element.

Here is my autocomplete code (which I changed a bit)

$(function() { (function( $ ) { $.widget( "ui.combobox", { _create: function() { var self = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : ""; var input = this.input = $( ".editableCombobox" ) // your input box //.insertAfter( select ) .val( value ) .autocomplete({ delay: 0, minLength: 0, source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( select.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text.replace( new RegExp( "(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi" ), "$1" ), value: text, option: this }; }) ); }, select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); }, change: function( event, ui ) { if ( !ui.item ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), valid = false; select.children( "option" ).each(function() { if ( $( this ).text().match( matcher ) ) { this.selected = valid = true; return false; } }); //if ( !valid ) { // remove invalid value, as it didn't match anything //$( this ).val( "" ); //select.val( "" ); //input.data( "autocomplete" ).term = ""; //return false; // } } } }) .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); }; this.button = $( "<button type='button'>&nbsp;</button>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) //.addClass( "ui-corner-right ui-button-icon" ) .live('click',function() { // close if already visible if ( $(this).prev().autocomplete( "widget" ).is( ":visible" ) ) { $(this).prev().autocomplete( "close" ); return; } // work around a bug (likely same cause as #5265) $( this ).blur(); // pass empty string as value to search for, displaying all results $(this).prev().autocomplete( "search", "" ); $(this).prev().focus(); }); }, destroy: function() { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery ); $( "#combobox" ).combobox(); $( "#toggle" ).live('click',function() { $( "#combobox" ).toggle(); }); }); 

Here is my code that adds a new item

 var selectedRow = $('#contactGroup'+rowId); var clonedRow = selectedRow.clone(); selectedRow.after(clonedRow); 

After reading many such questions, I think .live might help, but I'm not sure where to use it.

EDIT:

I tried to remove live .

New autocomplete code

 $(function() { (function( $ ) { $.widget( "ui.combobox", { _create: function() { var self = this, select = this.element.hide(), selected = select.children( ":selected" ), value = selected.val() ? selected.text() : ""; var input = this.input = $( ".editableCombobox" ) // your input box //.insertAfter( select ) .val( value ) .autocomplete({ delay: 0, minLength: 0, source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( select.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text.replace( new RegExp( "(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi" ), "$1" ), value: text, option: this }; }) ); }, select: function( event, ui ) { ui.item.option.selected = true; self._trigger( "selected", event, { item: ui.item.option }); }, change: function( event, ui ) { if ( !ui.item ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ), valid = false; select.children( "option" ).each(function() { if ( $( this ).text().match( matcher ) ) { this.selected = valid = true; return false; } }); //if ( !valid ) { // remove invalid value, as it didn't match anything //$( this ).val( "" ); //select.val( "" ); //input.data( "autocomplete" ).term = ""; //return false; // } } } }) .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); }; this.button = $( "<button type='button'>&nbsp;</button>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .insertAfter( input ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "ui-corner-right ui-button-icon" ) .click(function() { // close if already visible if ( $(this).prev().autocomplete( "widget" ).is( ":visible" ) ) { $(this).prev().autocomplete( "close" ); return; } // work around a bug (likely same cause as #5265) $( this ).blur(); // pass empty string as value to search for, displaying all results $(this).prev().autocomplete( "search", "" ); $(this).prev().focus(); }); }, destroy: function() { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } }); })( jQuery ); $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); 

Cloning a newly added item using cloning

  var selectedRow = $('#contactGroup'+rowId); var clonedRow = selectedRow.clone(); selectedRow.after(clonedRow); $(('#contactGroup'+rowId) .editableCombobox).autocomplete( "search", "" ); 

Answer 1

You cannot use 'live' on autocomplete as far as I know.

Put the autocomplete options in a function that expects the field to be the parameter on which you want to apply the autocomplete method.

 function enable_autocomplete(InputField) { $(InputField).autocomplete({ source: availableTags }); } 

Then, after cloning the field, call this function with the cloned field.

 enable_autocomplete(ClonedField); 

I wrote you a simple example, which greatly facilitates the understanding of what I'm trying to say ;-)

Edit : I wrote another example based on the combobox example from jQueryUIs.

Answer 2

You can use live, although these days you should use the 'on' method.

See this topic for working examples (including one that uses 'on' if you go to some hidden answers): Bind jQuery UI autocomplete using .live ()

Cheers Matt