Автозаполнение пользовательского интерфейса jquery: мое клонированное поле автозаполнения не работает - PullRequest
Новая
       17

Автозаполнение пользовательского интерфейса jquery: мое клонированное поле автозаполнения не работает

2 голосов
/ 19 января 2011

Я довольно новичок в 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 Ответ

2 голосов
/ 19 января 2011

Я решил это сам! во-первых, я сделал внешнюю функцию для инициализации автозаполнения, принимая в качестве параметра источник данных, например: 

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, чтобы инициализировать первый оригинальный (не клонированный) элемент, например: 

$(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"); получить источник из уже инициализированного элемента управления автозаполнения.

Надеюсь, это кому-нибудь пригодится !! Спасибо всем в любом случае.

...