I'm pretty new to jquery and specially to jqueryUI I'm trying to clone a working autocomplete field many times, but the clone()ed elements are not autocomplete anymore... (the autocomplete declaration works with many fields of the same CLASS it stops working just after the clone) here's my jquery code:
$(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');
});
and here's the page where I have and clone fields:
<script type="text/javascript">
function adddiv(cl开发者_运维技巧asse){
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 = "+"/>
Should I re-init in some way the autocomplete?? how?? thanks everyone in advance!
I solved it by myself! first of all I made an external function to initialize autocomplete taking as a parameter the datasource, like this:
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);
};
});
}
Then I called my init function in the .get callback to initialize the first original (not cloned) element,like this:
$(function(){
$.get("ajax/lista_patologie.php",function(data){initAutocompletePat(data);},'json');
});
And later each time I clone an element I'll call my
initAutocompletePat(source)
function passing to it the source of the first element in the type with this:
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" ); is to get the source from an already initialized autocomplete control.
Hope it will be usefull to someone!! Thanks everybody anyway.
精彩评论