복제 된 요소에 jQuery 자동 완성 적용

Question

jQuery autocomplete을 사용하고 있는데, 기존 요소에서는 정상적으로 작동하지만 동적으로 추가 된 요소에서는 정상적으로 작동하지 않습니다. 여기

(나는 조금 변경) 내 자동 완성 코드 여기

$(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(); 
     }); 

     }); 

내가 .live 도움이 될 생각 많은 유사한 질문 만 읽고 나면 새로운 요소

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

을 추가 내 코드입니다 그것을 어디에서 사용해야할지 모르겠습니다.

편집 :

나는 live을 제거했습니다. 자동 완성

$(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(); 
     }); 

     }); 

에 대한

새로운 코드는 새로 복제 방법

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

Answer 1

당신은 내가 아는 한, 자동 완성에 '라이브'사용할 수 없습니다에 요소를 추가 바인딩.

자동 완성 메서드를 적용 할 필드를 매개 변수로 사용하는 함수에 자동 완성 옵션을 배치하십시오.

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

그런 다음 필드를 복제 한 후 복제 된 필드를 사용하여이 함수를 호출하십시오.

enable_autocomplete(ClonedField); 

I've written you an easy example, what makes it much easier to understand what I am trying to say ;-)

편집 : 당신이 '에'방법을 사용한다 요즘 있지만 I've written another example based on the combobox example from jQueryUIs website.

Answer 2

당신은 '라이브'사용할 수 있습니다. Bind jQuery UI autocomplete using .live()

환호 매트