Question

我对jquery很新，特别是jqueryUI我试图多次克隆一个有效的自动完成字段，但是clone（）ed元素不再自动完成了... （自动完成声明适用于克隆之后停止工作的同一CLASS的许多字段）这是我的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 = "+"/>

我应该以某种方式重新启动自动完成功能吗？怎么样？？提前谢谢大家！

Answer 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);
}

这个.autocomplete（“选项”，“来源”）;是从已经初始化的自动完成控件获取源。

希望它对某人有用!! 无论如何，谢谢大家。

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

1 个答案: