Saisie radiative autocomplete sur champ inséré en boucle while

Bonjour à tous,

nouvelle sur ce forum et je tente ma chance pour avoir de l'aide
Je cherche à faire fonctionner plusieurs champs en autocomplète sur la même page
souci : ce sont des champs qui ont le même Id car ils proviennent d'une boucle while
je pourrais leur donner un id unique ( j'ai tenté mais ça n'a pas fonctionné )

Voici mon code où se trouvent mes champs

<div class="row">
<?php try  {
$bdd = new PDO('mysql:host=localhost;dbname=xxxxx', 'xxxxxx', 'xxxxx');
} catch(Exception $e)
{ die('Erreur : '.$e->getMessage()); }
$reponse = $bdd->query('SELECT nom_file, alt,societe,societe2,nomp, nomp2,prenom,prenom2,metiers2,metiers,villes,departement,lieu_x, snippet,tag1,tag2,tag3,tag4, tag5, local, venteenligne, ventelocale, lieu_x FROM publications WHERE categories2="agriculture" and etat="ok"  ORDER BY type ASC');
while ($donnees = $reponse->fetch()) {
?>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-12 blog-item padding15" >
<div class=" animated blog-item-wrapper2 wow fadeInUp" data-wow-delay="0.3s">
<div class="blog-item-img imgannuaire">
         
<img src="https://www.annuaire-web-bees-and-roses.com/upload/<?php echo $donnees['nom_file'] ; ?>" alt="<?php echo $donnees['alt'] ; ?>" class="lazy ">
</div>
<div class="blog-item-text">
<div class="blockquote">
<h3 class="orange lowercase"> <?php echo utf8_encode($donnees['metiers']); ?>  </h3>
<h4><?Php  if ( empty($donnees['societe'] )) { echo utf8_encode($donnees['prenom']) .' '.utf8_encode( $donnees['nomp']) .' <br>';}
else { echo  utf8_encode($donnees['societe'])  ; } ?> </h4>
<?Php  if ( !empty($donnees['venteenligne'] )) { echo '<div class="btnventeenligne">Vente en ligne</div> ' ; } ?>
<?Php  if ( !empty($donnees['ventelocale'] )) { echo '<div class="btnventelocale">'.$donnees['departement'].'</div> ' ; } ?>
<?php
$currentDate = date("Y-m-d");                                    
$datetime1 = new DateTime($currentDate);
$datetime2 = new DateTime($donnees['lieu_x']);
$interval = $datetime2->diff($datetime1);
if ( $interval->format('%R%a days') < +15) { echo' <div class="btnnew">Nouveau</div>';} else { echo ''; } ?>
</div>
<p><?php echo utf8_encode($donnees['snippet']) ; ?></p>
<?Php  if ( empty($donnees['societe'] ) and !empty($donnees['local']) )  {
echo '
<a href="https://www.annuaire-web-bees-and-roses.com/'.$donnees['metiers2'].'/'.$donnees['villes'].'/'.$donnees['departement'].'/'.$donnees['prenom2'].'/'.strtolower($donnees['nomp2']).'.php" class="btn btn-common btn-rm"> Voir la fiche</a><hr><div class="affine"><em class="em3">Affiner votre recherche</em><br>pour '.utf8_encode($donnees['metiers']).' <br>
<div class="tags">
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag1']) .'">'.utf8_encode( $donnees['tag1']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag2']) .'">'.utf8_encode( $donnees['tag2']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag3']) .'">'.utf8_encode( $donnees['tag3']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag4']) .'">'.utf8_encode( $donnees['tag4']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag5']) .'">'.utf8_encode( $donnees['tag5']) .'</a>
 
</div>
 
<hr>
Ou indiquez votre département<form action="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php">
<input class="inline vtop etiquette" aria-label="search" value="'.utf8_encode($donnees['metiers']).'" type="hidden"  name="requete2" id="search" >
<div class="input_container">
<input class="inline vtop etiquette" aria-label="search" value="'.$_POST['keyword'].'" type="text"  name="requete3" id="search2" onkeyup="autocomplet()" autocomplete="off"  ><input class="sb-search-submit2" type="submit" value="OK" >
<ul id="departement_id"></ul>
</div>
</form></div>';}
     
     
 if (empty($donnees['local']) and empty($donnees['societe'] )) {  echo' <a href="https://www.annuaire-web-bees-and-roses.com/'.$donnees['metiers2'].'/'.$donnees['prenom2'].'/'.$donnees['nomp2'].'.php" class="btn btn-common btn-rm"> Voir la fiche</a><br><hr><div class="affine"><em class="em3">Affiner votre recherche</em><br>pour '.utf8_encode($donnees['metiers']).' <br>
<div class="tags">
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag1']) .'">'.utf8_encode( $donnees['tag1']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag2']) .'">'.utf8_encode( $donnees['tag2']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag3']) .'">'.utf8_encode( $donnees['tag3']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag4']) .'">'.utf8_encode( $donnees['tag4']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag5']) .'">'.utf8_encode( $donnees['tag5']) .'</a>
 
</div>
 
<hr>
Ou indiquez votre département<form action="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php">
<input class="inline vtop etiquette" aria-label="search" value="'.utf8_encode($donnees['metiers']).'" type="hidden"  name="requete2" id="search" ><div class="input_container">
<input class="inline vtop etiquette" aria-label="search" value="'.$_POST['keyword'].'" type="text"  name="requete3" id="search2" onkeyup="autocomplet()" autocomplete="off" ><input class="sb-search-submit2" type="submit" value="OK" >
<ul id="departement_id"></ul>
</div>
 
</form></div>'; }
                                   
  
if (!empty($donnees['local']) and !empty($donnees['societe']) ) {
echo '
<a href="https://www.annuaire-web-bees-and-roses.com/'.$donnees['metiers2'].'/'.$donnees['villes'].'/'.$donnees['departement'].'/'.$donnees['societe2'].'.php" class="btn btn-common btn-rm"> Voir la fiche</a><br><hr><div class="affine"><em class="em3">Affiner votre recherche</em><br>pour '.utf8_encode($donnees['metiers']).' <br>
<div class="tags">
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag1']) .'">'.utf8_encode( $donnees['tag1']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag2']) .'">'.utf8_encode( $donnees['tag2']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag3']) .'">'.utf8_encode( $donnees['tag3']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag4']) .'">'.utf8_encode( $donnees['tag4']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag5']) .'">'.utf8_encode( $donnees['tag5']) .'</a>
 
</div>
 
<hr>
Ou indiquez votre département<form action="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php">
<input class="inline vtop etiquette" aria-label="search" value="'.utf8_encode($donnees['metiers']).'" type="hidden"  name="requete2" id="search" >
<div class="input_container">
<input class="inline vtop etiquette" aria-label="search" value="'.$_POST['keyword'].'" type="text"  name="requete3" id="search2" onkeyup="autocomplet()" autocomplete="off" ><input class="sb-search-submit2" type="submit" value="OK" >
<ul id="departement_id"></ul>
</div>
</form></div>';}
                                       
if (empty($donnees['local']) and !empty($donnees['societe'])) {  echo' <a href="https://www.annuaire-web-bees-and-roses.com/'.$donnees['metiers2'].'/'.$donnees['societe2'].'.php" class="btn btn-common btn-rm"> Voir la fiche</a><br><hr><div class="affine"><em class="em3">Affiner votre recherche</em><br>pour '.utf8_encode($donnees['metiers']).' <br>
<div class="tags">
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag1']) .'">'.utf8_encode( $donnees['tag1']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag2']) .'">'.utf8_encode( $donnees['tag2']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag3']) .'">'.utf8_encode( $donnees['tag3']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag4']) .'">'.utf8_encode( $donnees['tag4']) .'</a>
<a href="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php?requete2='.utf8_encode( $donnees['tag5']) .'">'.utf8_encode( $donnees['tag5']) .'</a>
 
</div>
 
<hr>
Ou indiquez votre département<form action="https://www.annuaire-web-bees-and-roses.com/annuaire-agriculture.php">
<input class="inline vtop etiquette" aria-label="search" value="'.utf8_encode($donnees['metiers']).'" type="hidden"  name="requete2" id="search" ><div class="input_container">
<input class="inline vtop etiquette" aria-label="search" value="'.$_POST['keyword'].'" type="text"  name="requete3" id="search2" onkeyup="autocomplet()" autocomplete="off" ><input class="sb-search-submit2" type="submit" value="OK" >
<ul id="departement_id"></ul>
</div>
</form></div>' ; }  ?> </div></div></div><?php } $reponse->closeCursor();?>
 
    </div>

ensuite le code javascript

function autocomplet() {

var min_length = 2;
var keyword = $('#search2').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_refresh.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#departement_id').show();
$('#departement_id').html(data);
}
});
} else {
$('#departement_id').hide();
}
}

// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#search2').val(item);
	// hide proposition list
	$('#departement_id').hide();
}

$(window).click(function()
{
 //Le code sera exécuté pour tous les clics effectués en dehors de l'élément monElement
});
$('#search2').click(function(event)
{
 event.stopPropagation(); $('#departement_id').hide();
}); 

Le code fonctionne mais uniquement pour le premier champ résultat issu de la boucle while, les autres non

bref j'ai cherché si quelqu'un avait eu le même besoin ou si c'est moi qui suis azimutée ... et je penche pour la seconde solution mais j'aimerai quand même y arriver et surtout comprendre

PS : je suis nulle en ajax et en javascript : au mieux je modifie un script et encore mais je ne sais pas les programmer
gros bisous à tous
angélique
Modifié par tsiganedelespace (15 Nov 2017 - 18:50)