jquery UI 自动完成：我克隆的自动完成字段不起作用答案

【问题标题】：jquery UI autocomplete: My cloned autocomplete field doesn't workjquery UI 自动完成：我克隆的自动完成字段不起作用
【发布时间】：2011-06-11 08:48:44
【问题描述】：

我是 jquery 的新手，特别是 jqueryUI 我试图多次克隆一个工作的自动完成字段，但是 clone()ed 元素不再自动完成...... （自动完成声明适用于同一类的许多字段，它在克隆后停止工作）这是我的 jquery 代码：

$(function(){
        var patologie;
        $.get("ajax/lista_patologie.php",function(data){patologie = data;           
        $('.patologia').each(function(i, el) {
        el = $(el);
        el.autocomplete({
        minLength: 0,
        source: patologie,
        focus: function( event, ui ) {
            $(this).val( ui.item.Topography );
            return false;
        },
        select: function( event, ui ) {
            $(this).val(ui.item.Topography);
            return false;
        }
        })
        .data("autocomplete")._renderItem = function( ul, item ) {
            return $( "<li></li>" )
            .data("item.autocomplete", item )
            .append("<a>" + item.Topography + "<br/>" + item.Description + "</a>" )
            .appendTo(ul);
        };
        });
        },'json');
});

这是我拥有和克隆字段的页面：

<script type="text/javascript"> 
    function adddiv(classe){
    var clonedEl = $('.'+classe+':last').clone(true);
    $(clonedEl).find('input:text').val('');
    clonedEl.insertAfter('.'+classe+':last');
    $('.'+classe).children('img[src*="delete"]').show();
    }
    function remdiv(el){
    var parents = $('.'+el.parent().attr('class').toString());
    if (parents.size()> 1) {
        el.parent().remove();
    }
    if (parents.size()== 2){
        parents.children('img[src*="delete"]').hide();
        }
    }
    </script>

<div class="divpatologia">
<input class="codpatologia"></input>
<img src="css-images/delete_icon.png" align="absmiddle" onClick="remdiv($(this));" style="display: none;"/>
</div>
<input type="button" onClick="adddiv('divpatologia');" value = "+"/>

我应该以某种方式重新初始化自动完成功能吗？如何？？提前谢谢大家！

【问题讨论】：

标签： jquery-ui autocomplete clone

【解决方案1】：

我自己解决了！首先，我创建了一个外部函数来初始化自动完成，将数据源作为参数，如下所示：

function initAutocompletePat(patologie){
$('.codpatologia').each(function(i, el) {
    el = $(el);
    el.autocomplete({
        minLength: 0,
        source: patologie,
        focus: function( event, ui ) {
            $(this).val( ui.item.Topography );
            return false;
        },
        select: function( event, ui ) {
            $(this).val(ui.item.Topography);
            return false;
        }
    })
    .data("autocomplete")._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data("item.autocomplete", item )
            .append("<a>" + item.Topography + "<br/>" + item.Description + "</a>" )
            .appendTo(ul);
    };
});
}

然后我在 .get 回调中调用了我的 init 函数来初始化第一个原始（未克隆）元素，如下所示：

$(function(){
$.get("ajax/lista_patologie.php",function(data){initAutocompletePat(data);},'json');    
});

以后每次我克隆一个元素时，我都会调用我的

initAutocompletePat(源代码)

函数将类型中第一个元素的源传递给它：

function aggiungiPat(classe){
var clonedEl = $('.'+classe+':last').clone();
$(clonedEl).find('input:text').val('');
clonedEl.insertAfter('.'+classe+':last');
$('.'+classe).children('img[src*="delete"]').show();

var source = $('.'+classe+':first' ).find('input:text').autocomplete( "option", "source" );
initAutocompletePat(source);
}

this .autocomplete("option", "source");是从一个已经初始化的自动完成控件中获取源代码。

希望它对某人有用！还是谢谢大家。

【讨论】：