Autocomplete multi-instances
Bonjour,
j'ai un formulaire avec un autocomplete via la bibliotheque jquery ui :
voici mon code HTML avec mes champs :
Code:
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:
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.
