Autocomplete dla inputa z clone()

2017-03-31 23:07
0

Witam, autocomplete działa mi tylko dla pierwszego inputa dodatkowe tworzone przez kopiowanie całego li z inputami nie działają.

input wygląda tak:


<li>
     <input type="text" class="ingredient" name="ingredient[]" onkeyup="autocomplet()" autocomplete="off" value=""  />
     <ul id="ingredient_list_id"></ul>
     <input type="text" class="datepicker" name="deliverydate[]" autocomplete="off" value=""  />
</li>

kod js:


$('button').on('click', function(event) {
 event.preventDefault();
 var lines = $('#lines');
 var i = 0;
 $('input.datepicker').datepicker("destroy");
 lines.append(lines.find('li:first-child').clone());
 $('.datepicker').each(function () {
 $(this).attr("id",'datepicker' + i).datepicker();
 i++;
 });
});
 $('input.datepicker').datepicker();
 $( function() {
 $( "#datepicker" ).datepicker();
} );

   // autocomplet : this function will be executed every time we change the text
function autocomplet() {
    var min_length = 1; // min caracters to display the autocomplete
    var keyword = $('.ingredient').val();
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'ajax_refresh.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $('#ingredient_list_id').show();
                $('#ingredient_list_id').html(data);
            }
        });
    } else {
        $('#ingredient_list_id').hide();
    }
}

// set_item : this function will be executed when we select an item
function set_item(item) {
    // change input value
    $('.ingredient').val(item);
    // hide proposition list
    $('#ingredient_list_id').hide();
}

Datepicker mi dział natomiast jak w podobny sposób próbuje dodać autocomplete to nie działa. Macie jakieś pomysły na to?

edytowany 1x, ostatnio: furious programming, 2017-04-01 00:22

Pozostało 580 znaków

2017-04-02 09:51
0

Nikt nic nie podpowie? Otworzyłem taki sam wątek również na innych forach i nigdzie nie dostałem żadnej chociażby najmniejszej podpowiedzi, teraz nie wiem czy źle opisałem problem czy to pytanie to za wysoki poziom?

Pozostało 580 znaków

2017-04-03 19:01
0

Jak na próbę zrobię tak:


<li>
     <input type="text" class="ingredient" name="ingredient[]" onkeyup="autocomplet()" autocomplete="off" value=""  />
     <ul id="ingredient_list_id"></ul>
     <input type="text" class="datepicker" name="deliverydate[]" autocomplete="off" value=""  />
</li>
<li>
     <input type="text" class="ingredient" name="ingredient[]" onkeyup="autocomplet2()" autocomplete="off" value=""  />
     <ul id="ingredient_list_id"></ul>
     <input type="text" class="datepicker" name="deliverydate[]" autocomplete="off" value=""  />
</li>

i


$('button').on('click', function(event) {
 event.preventDefault();
 var lines = $('#lines');
 var i = 0;
 $('input.datepicker').datepicker("destroy");
 lines.append(lines.find('li:first-child').clone());
 $('.datepicker').each(function () {
 $(this).attr("id",'datepicker' + i).datepicker();
 i++;
 });
});
 $('input.datepicker').datepicker();
 $( function() {
 $( "#datepicker" ).datepicker();
} );

   // autocomplet : this function will be executed every time we change the text
function autocomplet() {
    var min_length = 1; // min caracters to display the autocomplete
    var keyword = $('.ingredient').val();
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'ajax_refresh.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $('#ingredient_list_id').show();
                $('#ingredient_list_id').html(data);
            }
        });
    } else {
        $('#ingredient_list_id').hide();
    }
}

function autocomplet2() {
    var min_length = 1; // min caracters to display the autocomplete
    var keyword = $('.ingredient').val();
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'ajax_refresh.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $('#ingredient_list_id').show();
                $('#ingredient_list_id').html(data);
            }
        });
    } else {
        $('#ingredient_list_id').hide();
    }
}

// set_item : this function will be executed when we select an item
function set_item(item) {
    // change input value
    $('.ingredient').val(item);
    // hide proposition list
    $('#ingredient_list_id').hide();
}

Drugi input nie działa, tzn. nie ma podpowiedzi w ogóle, pierwszy input działa normalnie z tym że wybrana opcja pojawia się w wszystkich inputach.

edytowany 1x, ostatnio: lustfingers, 2017-04-03 19:03

Pozostało 580 znaków

Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0