JQuery 자동 완성 및 복제

Question

jQuery 복제본을 사용할 때 테이블의 여러 행에 jQuery AutoComplete를 적용하는 데 문제가 있습니다. 자동 완성 기능은 첫 번째 행에서는 작동하지만 추가 행이 표에 추가되면 작동하지 않습니다.

HTML 테이블 : :

<table class="table" cellspacing="0" id="myTable"> 
     <tr> 
     <th width="40%">Item</th> 
     <th width="60%">Description</th> 
     </tr> 
     <tr> 
     <td>input name="product_title" id="product_title" type="text"><td> 
     <td><textarea name="product_description" id="product_description"></textarea></td> 
     </tr> 
    </table> 
    <input type="button" value="Add Row" onclick="javascript:addRow()"> 

클론 스크립트 :

function addRow(){ 
    $('#myTable tr:last').clone(true).insertAfter('#myTable tr:last'); 
    $('#myTable tr:last input').val(""); 
    $('#myTable tr:last input:first').focus();   
} 

자동 완성 스크립트를 자동 완성에 대한

$().ready(function() { 
    $("#product_title").autocomplete(products, { 
    width: 380, 
    matchContains: "word", 
    formatItem: function(row) { 
     return row.title; 
    } 
    }); 
    $('#product_title').result(function(event, data) { 
    $('#product_description').val(data.description); 
    }); 
}); 

데이터는에서 가져 지금까지, 나는 다음과 같은이 제품 제목과 설명을 정의하는 간단한 MySQL 쿼리. 순간

는 그러나이 추가 된 추가 행에서 작동 할 수 없습니다, 새 행이 잘 작동 그래서 테이블의 첫 번째 행에 대한 자동 완성을하지 추가 할 수 있습니다. HTML 표에 두 번째 행을 수동으로 추가하더라도 자동 완성 기능이 작동하지 않습니다.

이 작업을 수행하기 위해 위의 코드를 수정할 수있는 쉬운 방법이 있습니까? jQuery에 관해서는 초보자이므로 세부 사항이 많을수록 좋습니다.

미리 감사드립니다.

Answer 1

이 동적으로 추가 요소 플러그인을 사용하여 공통의 문제이다. 그것은 보통은 DOM에 삽입 한 후 새로운 요소 플러그인을 호출해야합니다. 대신 초기 페이지로드 요소와 새로운 요소에 대한 동일한 코드를 복제, 당신은 일반적으로 요소가 플러그인을 적용 할 경우에만 해당 요소 내에서 주요 기준으로 부모 요소를 사용하여 검색하는 간단한 도우미 함수를 만들 수 있습니다.

중요 : 새 행을 복제 할 때 ID가 반복되며 ID는 정의에 따라 페이지에서 고유해야합니다. 다음 코드는 대신 클래스에 아이디의 변경 당신은 당신의 마크 업에서 동일한 작업을 수행해야합니다.

var $row=$table.find('tr:last').clone();이 true 제거와

var $row=$table.find('tr:last').clone(true);

:

var $table; 
$(function() { 
    $table=$('#myTable'); 
    var $existRow=$table.find('tr').eq(1); 
     /* bind to existing elements on page load*/ 
     bindAutoComplete($existRow); 
}); 

function addRow(){ 
    var $row=$table.find('tr:last').clone(true); 
    var $input=$row.find('input').val(""); 
    $table.append($row); 
    bindAutoComplete($row); 
    $input.focus(); 

} 


function bindAutoComplete($row){ 
    /* use row as main element to save traversing back up from input*/ 
    $row.find(".product_title").autocomplete(products, { 
     width: 380, 
     matchContains: "word", 
     formatItem: function(row) { 
      return row.title; 
     } 
    }); 
    $row.find('.product_title').result(function(event, data) { 
     $row.find('.product_description').val(data.description); 
    }); 
} 

Answer 2

Charlietfl의 게시물 내 문제, 내가 대체되었다했습니다 유일한 변화를 해결했다. 이 다른 사람 :

Answer 3

하는 데 도움이

희망은 당신이 이미 자동 완성 특성을 가지고 다음 자동 완성은 새로운 요소로 "다시"추가 할 수있는 요소를 복제, 문제가 clone()으로 생각합니다. 난 당신이, 당신은 요소의 원래의 HTML 코드를 사용에 넣어해야하지 clone()해야한다고 생각

편집 :.

나는 그것을 해결 방법 : orginal 한 입력

1. autocomplete("destroy")을 필드는 복제하고 싶습니다.
2. 복제 당신의 요소는

에 자동 완성 기능을 추가하고 clone(true)를 사용하지 않는,하지만 당신은 clone()