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 :
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.
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 ); };
Je vous remercie pour votre aide.
Partager