[jQuery] Autocomplete dla kilku inputów z taką samą klasą. Opcje

[lustfingers]

Próbuje wdrożyć ten autocomplete: http://www.bewebdeveloper.com/tutorial-abo...ysql-and-jquery i działa ładnie z tym że posiadam naście identycznych inputów a autocomplete pojawia się tylko dla pierwszego.

Mój input wygląda tak:

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

a kolejne inputy pojawiają się przy użyciu funkcji clone(), natomiast kod js prezentuje się tak:

[HTML] pobierz, plaintext 
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();
}
[HTML] pobierz, plaintext 

więc jest minimalnie inny od tego z przykładu ponieważ w przykładzie opierał się na ID. Wiem że muszę dla każdego inputa nadać inne ID i dostosować do tego kod js tylko nie mam zielonego pojęcia jak, od czego zacząć?

[Pyton_000]

Odpal sobie Developers Tool w przeglądarce i zobacz sobie jakimi błędami sypie

[lustfingers]

Nie mam błędów, po prostu gdy ma np. 10 inputów to wpisanie w jednym powoduje wpisanie w wszystkich to samo.

[viking]

Znowu nie rozrozniasz klasy od identyfikatora?

[lustfingers]

Znowu nie rozumiem o co chodzi i tu chyba mam największy problem (IMG:style_emoticons/default/biggrin.gif) przydałyby się nieco konkretniejsze wskazówki, coś co pobudzi do myślenia na razie nie wiem w którą stronę iść mimo że problem wydaje się być bardzo podobny do ostatniego nie mam pomysłu jak to ogarnąć.


EDIT.
Ponieważ w js mam już podobna działającą funkcję datepickera próbowałem na podobnej zasadzie dopisać obsługę autocomplete, niestety rezultat nie przyniósł chcianych efektów.

W chwili obecnej to mam:

[HTML] pobierz, plaintext 
$('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();
}
 
[HTML] pobierz, plaintext 

Na próbę jak zrobię tak:

Kod

<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

Kod

$('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.

Ten post edytował lustfingers 31.03.2017, 18:08:27

[Pyton_000]

Zauważ że wszędzie gdzie robisz `$('.ingredient').val();` to zawsze pobiera Ci pierwszy (chyba) input z tą klasą. Musisz to zmienić.

Oczywiście ID elementu MUSI być unikalne więc też musisz dodać zamiast `ingredient_list_id` jakąś unikalną nazwę dla każdego autocomplete.

[lustfingers]

Dzięki ostatecznie całkowicie usunąłem funkcję autocomplet() i set_item() a użyłem:

[HTML] pobierz, plaintext 
$(document).on('input', '.ingredient', function () {
    var $input = $(this);
    var min_length = 1; // min caracters to display the autocomplete
    var keyword = $input.val();
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'ajax_refresh.php',
            type: 'POST',
            data: {keyword:keyword},
            success:function(data){
                $input.next('ul').html(data).show();
            }
        });
    } else {
         $input.next('ul').hide();
    }
});
 
$(document).on('click', '.ingredient + ul > li', function () {
    var $list = $(this).closest('ul');
    var $input = $list.prev('input');
 
    $input.val($(this).data('text'));
    $list.hide();
});
[HTML] pobierz, plaintext 

Teraz działa tak jak chciałe przynajmniej tak mi sie na razie wydaje (IMG:style_emoticons/default/wink.gif)

[viking]

Poprobuj w różnych przeglądarkach bo zdarzenie input nie wszędzie działało jeszcze.

[lustfingers]

Chrome i mozilla ok a generalnie jest to do własnego użytku więc więcej mi nie potrzeba, mam jeszcze jedna sprawę z tym autocomplete ponieważ w chwili obecnej podpowiedzi się wyświetlają aż do momentu gdy:
1. kliknę na wybrana podpowiedź
2. wpiszę tekst którego nie ma w bazie
3. usunę wymagana ilość liter z inputa

więc zaczynając wpisywać wyświetlają się podpowiedzi natomiast chcę aby po kliknięciu gdziekolwiek poza obszarem inputa i podpowiedzi okno podpowiedzi zniknęło.

Gdy zrobię to tak:

[HTML] pobierz, plaintext 
 $(document).bind('click', function (event) {
        if (!($(event.target).is('.ingredient'))) {
            $("#ingredient_list_id").remove();
		}
		});
[HTML] pobierz, plaintext 

to okno znika ale dopiero po 2 kliknięciu poza obszarem, oraz już podpowiedzi przestają sie całkowicie pokazywać dla dowolnego inputa.