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

Posted 2023-02-22

【中文标题】jquery UI 自动完成：我克隆的自动完成字段不起作用

【英文标题】：jquery UI autocomplete: My cloned autocomplete field doesn't work

【发布时间】：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 = "+"/>

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

【参考方案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");是从一个已经初始化的自动完成控件中获取源代码。

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