Javascript jQuery Ajax Autocomplete über mehrere Zeilen

Question

ich ein Problem mit meinem Autocomplete haben

PHP File:

while ($zeile = mysqli_fetch_array($db_erg, MYSQL_ASSOC)){ 
    echo '<tr><form action="change.php?t=com&id=1" method="post" 
     <td> 
     <input type="text" name="dutie" id="file1" value="' . $zeile['dutie'] . '" autocomplete="off"> 
     </td> 
     <td > 
      <div class="container" style="width:500px;"> 
      <input type="text" name="name" id="con_name" value="0Vacant" autocomplete="off"/> 
      <div id="list"></div> 
     </div> 
     </td> 
     <td class="uk-text-middle"> 
     </td> 
     <td> 
     <a href="#" ></a> 
     </td> 
     <td><button type="submit">Submit</button></td> 
    </form></tr>'; 
} 

JS:

<script> 
$(document).ready(function(){ 
    $('#con_name').keyup(function(){ 
     var query = $(this).val(); 
     if(query != '') 
     { 
      $.ajax({ 
       url:"sql/search.php", 
       method:"POST", 
       data:{query:query}, 
       success:function(data) 
       { 
         $('#list').fadeIn(); 
         $('#list').html(data); 
       } 
      }); 
     } 
    }); 
    $(document).on('click', 'article', function(){ 
     $('#con_name').val($(this).text()); 
     $('#list').fadeOut(); 
    }); 
}); 
</script> 

Also im Grunde i mehrere Formulare in einer Tabelle müssen Ändere die Person zu einem Duty. Die automatische Vervollständigung funktioniert perfekt in der ersten Zeile, aber wenn es mehrere Ausgaben gibt (siehe auf dem Bild), funktioniert es nicht auf den anderen Formen ... Ich denke, das Problem ist in der JS, aber ich bin nicht in JS viel zu verstehen, was ich falsch mache.

Kann mir jemand helfen, so dass die zur automatischen Vervollständigung auf jedem Feld funktioniert?

Answer 1

Wie pro Kommentare hinzugefügt Beispielcode für Ihr Problem in jsfiddle

https://jsfiddle.net/0ur28asz/1/

<form> 
    <input type="text" id="text-1" class="text-box"> 
    <div id="text-1-list" class="article"></div> 
</form> 
<form> 
    <input type="text" id="text-2" class="text-box"> 
    <div id="text-2-list" class="article"></div> 
</form> 



var boxID=""; 
$(document).ready(function() { 
     $('.text-box').keyup(function(){ 
      boxID = $(this).attr('id'); 
      $('#'+boxID+'-list').fadeIn(); 
      $('#'+boxID+'-list').html("data select"); 
     }); 

     $(document).on('click', '.article', function(){ 
      $('#'+boxID).val($(this).text()); 
      $('#'+boxID+'-list').fadeOut(); 
     }); 
    });