Données de saisie semi-automatique Jquery pour chaque ligne

Question

Bonjour Dans ma requête, je souhaite renseigner les données dans les champs de formulaire de la ligne actuelle. Je vais avoir plusieurs champs avec mêmes classes et mon code fonctionne mais le problème que je suis confronté est, ce changement de code de toute la ligne, mais je veux changer seulement mes données actuelles de ligne Voici mon violon https://jsfiddle.net/1bfbtoxw/

Et voici mon jquery

$(".enginenum").autocomplete({ 
    source: "includes/modvehicleSale/search-engine.php", 
    minLength: 1, 
    select: function (event, ui) { 
     var item = ui.item; 
      if(item) { 
       $('.txtchassis').val(item.ChassisNo); 
       $('.txtdescription').val(item.BikeDescription); 
       $('txtselling').val(item.SellingAmount); 
      } 
     } 
}) 

Answer 1

A sample fiddle first

En supposant que vous avez .row en tant que parent pour chaque row vous pouvez consulter la ligne courante avec $(this).closest('.row') et peut utiliser .find pour obtenir les éléments connexes de cette rangée. Donc, vos modifications seraient comme ci-dessous:

$(".enginenum").autocomplete({ 
    source: "includes/modvehicleSale/search-engine.php", 
    minLength: 1, 
    select: function (event, ui) { 
     var item = ui.item; 
      if(item) { 
       $(this).closest('.row').find('.txtchassis').val(item.ChassisNo); 
       $(this).closest('.row').find('.txtdescription').val(item.BikeDescription); 
       $(this).closest('.row').find('.txtselling').val(item.SellingAmount); 
      } 
     } 
}); 

S'il vous plaît faire une note, que id s doivent être uniques à suivre les normes.

Answer 2

Votre jsFiddle n'est pas configuré correctement.

j'ai ajouté la classe à vos autres entrées et modifier le code js ci-après:

const ac_settings = { 
     source: "includes/modvehicleSale/search-engine.php", 
     minLength: 1, 
     select: function (event, ui) { 
      var item = ui.item; 
       if(item) { 
        $('.txtchassis').val(item.ChassisNo); 
             $('.txtdescription').val(item.BikeDescription); 
        $('txtselling').val(item.SellingAmount); 
       } 
      } 
    } 

$.each($(".enginenum"), function() { 
    $(this).autocomplete(ac_settings) 
}) 
//$(".enginenum").autocomplete() 

https://jsfiddle.net/1bfbtoxw/2/

Answer 3

essayez de sélectionner le plus proche ligne, comme celui-ci

var row = $(event.target).closest(".row"); 

utilisez cette rangée comme conteneur dans vos sélecteurs

$('.txtchassis', row) 

code sera:

$(".enginenum").autocomplete({ 
     source: "includes/modvehicleSale/search-engine.php", 
     minLength: 1, 
     select: function (event, ui) { 
      var row = $(event.target).closest(".row"); 
      var item = ui.item; 
       if(item) { 
        $('.txtchassis', row).val(item.ChassisNo); 
        $('.txtdescription', row).val(item.BikeDescription); 
        $('txtselling', row).val(item.SellingAmount); 
       } 
      } 
    })