Discussion :

[devlm]

Bonjour,

j'ai un formulaire avec un autocomplete via la bibliotheque jquery ui :

voici mon code HTML avec mes champs :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<tr>
	<td class="texte">Enseigne</td>
	<td><input name="nom_enseigne" type="text" class="champs_description recherche-vendeur" id="nom_enseigne" value="" size="20">
		<img src="images/btn-recherche-vendeur.png" border="0" alt="Rechercher un vendeur" title="Rechercher un vendeur" class="recherche-vendeur"></td>
	<td class="texte" colspan="2" rowspan="8" valign="top"><div class="liste-vendeurs"></div></td>						
	</tr>
	<tr>
		<td class="texte">Nom exploitant</td>
		<td><input name="nom_exploitant" type="text" class="champs_description" id="nom_exploitant" value="" size="20"></td>
	</tr>
	<tr>
		<td class="texte">Activité</td>
		<td><button>Liste d'activités</button></td>
	</tr>
	<tr>
		<td class="texte">Adresse</td>
		<td><input name="adresse" type="text" class="champs_description" id="adresse" value="" size="20"></td>
	</tr>	
	<tr>
		<td class="texte">CP</td>
		<td><input name="cp" type="text" class="champs_description" id="cp" value="" size="20"></td>
	</tr>
	<tr>
		<td class="texte">Ville</td>
		<td><input name="ville" type="text" class="champs_description" id="ville" value="" size="20"></td>
	</tr>

Actuellement je lance l'autocomplete depuis le champ #nom_enseigne.

Je souhaiterais étudier 2 possibilités :

- Lancer l'autocomplete depuis tous les champs-ci-dessus à chaque fois que l'on saisi du texte
- ou lancer l'autocomplete en cliquant sur l'icone #btn-recherche-vendeur.

Voici mon jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//Autocomplete client
$(".recherche-vendeur").autocomplete({
	source: function(request, response) {
		var nom_enseigne=$('#nom_enseigne').val();
		var nom_exploitant=$('#nom_exploitant').val();
		var adresse=$('#adresse').val();
		var cp=$('#cp').val();
		var ville=$('#ville').val();
		var telephone=$('#telephone').val();
		$.getJSON("action_recherche.php", { term: request.term, nom_enseigne:nom_enseigne, nom_exploitant:nom_exploitant, adresse:adresse, cp:cp, ville:ville, telephone:telephone, cas:'1'}, 
		  response);
	},
        minLength: 2,
        select: function(event, ui) {
                // $('#id').val(ui.item.id);
		var targetUrl = "vendeur.php?onglet=1&id="+ui.item.value;
		window.location.href = targetUrl;//envoi vers url
        },
	open: function(event, ui) {
		$('ul.ui-autocomplete').removeAttr('style').hide().appendTo('.liste-vendeurs').show();
	},
	close: function(event, ui) {
		$('.ui-autocomplete').css('display', 'block');
	}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li>" )
	.append( "<a>" + item.nom_enseigne + " - " + item.adresse + " - " + item.ville + "</a>" )
	.appendTo( ul );
};

J'ai fait un essai d'instance multiple en mettant la meme class à tous mes champs et en modifiant légèrement le code jquery, cependant il me génère dans ma div de consultation des résultats .liste-vendeurs, autant de liste ul que de champs concernés, comment pourrais-on les fusionner et éviter les doublons de résultats.

Je vous remercie pour votre aide.

[devlm]

Savez-vous comment je peux fusionner mes listes de résultats, car j'ai une liste ul pour chaque champ de recherche présent dans l'autocomplete.

[danielhagnoul]

Bonjour

UI Autocomplete traite un seul champ de recherche.

[devlm]

Je souhaiterais effectuer une autocompletion sur plusieurs de mes champs.

Ainsi, si on saisi l'entité ou la ville ou le code postal, cela effectue une recherche à la volée et affiche une liste des biens dans un div et on peut affiner au fur et à mesure.

Plutot que de recopier autant de fois que nécessaire la fonction autocomplete, j'aurais souhaité leur mettre une class unique et lancer la recherche à chaque modification d'un champ.