18041 sujets

Questions générales et questions de débutants

Autocomplete jquery

Bonjour

je sais faire fonctionner un autocomplète jQuery avec une source en mysql

mais je cherche à faire la même chose sur plusieurs champs. La difficulté est que ces champs possèdent le même id. Pourquoi ? car ils sont générés par une boucle while. Je peux donc avoir deux champs du même id comme je peux en avoir 3 ou 6.
Il s'agit donc de faire un autocomplète sur l premier comme sur tous les autres.

voici mon champ à autocompleter 
<li class="input_container"> <input type="text" id="country_id" onkeyup="autocomplet()" class="inline" placeholder="autre catégorie">
<ul id="country_list_id"></ul> </li>



le code qui marche sur un seul champ 
function autocomplet() {
	var min_length = 1; 
	var keyword = $('#country_id').val();
	
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#country_list_id').show();
				$('#country_list_id').html(data);
			}
		});
	} else {
		$('#country_list_id').hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#country_id').val(item);
	// hide proposition list
	$('#country_list_id').hide();
}


le code sur plusieurs champs que j'ai tenté d'écrire ( pardon si il vous semble absolument horrible et vous donne des boutons, je n'y connais rien et c'est bien pour ça que je suis ici). 

function autocomplet() {
	var min_length = 1; 
	var keyword = $('#country_id').$(this).siblings("#country_id").$(this);
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#country_list_id').show();
				$('#country_list_id').html(data);
			}
		});
	} else {
		$('#country_list_id').hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#country_id').val(item);
	// hide proposition list
	$('#country_list_id').hide();
}


Bref si une âme charitable pouvait m'aider, me donner le bon code et surtout m'expliquer la ligne de code qui me permet de faire cela , je serais ravie

merci à vous
Modifié par tsiganedelespace (20 Nov 2017 - 20:29)
tsiganedelespace a écrit :
La difficulté est que ces champs possèdent le même id. Pourquoi ? car ils sont générés par une boucle while. Je peux donc avoir deux champs du même id comme je peux en avoir 3 ou 6.

Une boucle en javascript ?

La première chose à faire n'est pas de faire avec ce problème et de construire bon an mal an du code sur un html aussi mal généré. Non, il faut revoir la génération de ce html pour n'avoir qu'une ID unique par champ.

Exemple en js (avec jQuery) : CodePen, Inputs add
tsiganedelespace a écrit :
La difficulté est que ces champs possèdent le même id

Je pense que tu dois déjà t'arrêter là et ne pas aller plus loin. Tu ne peux pas avoir des champs avec le même ID. On ne peut donc pas construire une solution sur la base d'une erreur délibérée.

Tu peux à la place utiliser des classes si tu as besoin d'identifier un groupe de champs.
Mais dans ce cas précis, tu n'as même pas besoin d'ID. Au lieu de passer par 
$('#country_list_id')

tu utilises simplement this
$(this)
Bonsoir et merci

j'ai aussi généré le code avec un ID différent pour chaque champ ( pas compliqué, ce que je sais faire) mais cela n'a rien changé au problème
la partie de code 
 function autocomplet() {
	var min_length = 1; 
	var keyword = $('#country_id').val();
ne fonctionnait que sue le premier de la collection
j'ai aussi pensé à mettre une class au lieu d'un ID et cela n'a pas fonctionné non plus
toujours avec le code 
function autocomplet() {
	var min_length = 1; 
	var keyword = $('#country_id').val();
seul le premier champ fonctionne
je vais essayer avec une class plus le this comme indiqué

je vais donc essayer 
function autocomplet() {
	var min_length = 1; 
	var keyword = $('this').val();

et mettre une class sur mes champs mais il me semble que je l'avais fait et cela n'ait rien donné non plus.
J'ai donc tenté 

<li class="input_container"> <input type="text" class="country_id" onkeyup="autocomplet()"  placeholder="autre catégorie">
<ul class="country_list_id"></ul> </li>


et 
function autocomplet() {
	var min_length = 2; 
	var keyword = $(this).val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$(this).show();
				$(this).html(data);
			}
		});
	} else {
		$(this).hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$(this).val(item);
	// hide proposition list
	$(this).hide();
}


cela ne fonctionne sur aucun des champs

avec 
[code=html]<li class="input_container"> <input type="text" id="country_id" onkeyup="autocomplet()"  placeholder="autre catégorie">
<ul id="country_list_id"></ul> </li>


et 
function autocomplet() {
	var min_length = 1; 
	var keyword = $('#country_id').val();
	
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#country_list_id').show();
				$('#country_list_id').html(data);
			}
		});
	} else {
		$('#country_list_id').hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#country_id').val(item);
	// hide proposition list
	$('#country_list_id').hide();
}


cela fonctionne sur le premier champ

si je mets un id unique avec le même code que ci-dessus aucun champ ne fonctionne
C'est parce qu'il faut maîtriser un minimum la notion du mot-clé this.
Tu dois redéfinir la référence de this dans ta fonction "succes" dans ton appel ajax en utilisant bind.

function autocomplet() {
	var min_length = 2; 
	var keyword = $(this).val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$(this).show();
				$(this).html(data);
			}.bind(this) // <--- ICI
		});
	} else {
		$(this).hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$(this).val(item);
	// hide proposition list
	$(this).hide();
}
Je pense que pour les détails tu peux chercher sur internet Smiley smile

En fait je n'ai pas vu que tu utilisais les attributs HTML pour la gestion d'événements...
Tu devrais sans doute le faire autrement mais si tu tien à le garder, tu dois encore passer par call.

<input onkeyup="autocomplet.call(this)">
Merci quand même
Je ne fais que ça de chercher et chercher à comprendre
Mais sur internet on trouve des bouts de code qui parlent certainement à ceux qui s’y connaissent mais absolument pas aux autres
On trouve rarement voire jamais des codes complets expliqués ligne par ligne et même sur des forums car les personnes estiment qu’on n’a qu’a Chercher par nous mêmes ou parlent de choses tellement évidentes pour eux ( ce que je peux comprendre)
On ne peut chercher ce que l’on ne comprend pas ou tellement peu
J’ai acheté des livres sur jQuery mais compliqué seule face à son bouquin
Ni bind ni call ne me parlent vraiment
Je connais php mysql html CSS3 mais ni AJAX ni JQuery ou sur des choses très simples
Bonne soirée

Par contre une fois un code compris même si je suis bouchée et longue à la détente je retiens pour les fois suivantes et petit à petit je peux modifier
Sujet clos
Aller à