Ziel mehrere Textfelder nacheinander, nicht alle auf einmal ohne IDs

Question

Ich habe es noch nicht getan, aber ich plane, Textfelder mit PHP auf der Grundlage der Benutzereingabe zu generieren. Also, wenn sie 3 eingeben, dann sollten sie 3 Textfelder zum Ausfüllen usw. bekommen.

Anstatt zu versuchen, jedem Textfeld eine ID zu geben (ich müsste Code anwenden, um das Textfeld zu nummerieren und basierend auf dem zu inkrementieren Nummer, die sie gewählt haben) kann ich nur eine Klasse oder Eingabe auswählen? Ich habe versucht, dies zu tun, sondern mit der Ajax-Suche, kommen Ergebnisse in allen Textfeldern auf, anstatt nur die, die sie in der Eingabe sind.

<div class="form-group"> 
     <input type="text" name="name" autocomplete="off"> 
     <div class="result"></div> 
    </div> 
    <div class="form_group"> 
     <input type="text" name="name" autocomplete="off"> 
     <div class="result"></div> 
    </div> 


$(document).ready(function(){ 
    $("input").keyup(function(){ 
     $(".loader").show(); 
     var input = $(this).val(); 
     if (input.length >3){ 
       $.ajax({ 
        type: 'POST', 
        url: 'insert-ajax.php', 
        data: {name:input}, 
        success: function(data){ 

         if(!data.error) { 
         $(".result").html(data); 
         $(".loader").hide(); 
         } 
        } 

       }); 
      } 

       if (input.length <1) { 
        $(".loader").hide(); 
        $(".result").html(""); 
       } 
     }); 

     $(".result").on("click", "li", function() { 
       console.log($(this).text()); 
      $("input").val($(this).text()); 

      }); 

    }); 

Answer 1

Mit jQuery-Objekten erhalten Sie eine große Auswahl an Traversierungsfunktionen, die Sie hier verwenden können. Wie ich verstehe, haben Sie in jedem Ihrer .results divs eine ungeordnete Liste, und Sie möchten in der Lage sein, auf einen li in dieser Liste klicken und das nächste Textfeld einen Wert füllen. Angenommen, ich habe Recht, können Sie die .closest() Funktion verwenden, um den Vorgänger .resultsdiv für diesen li zu erhalten und dann das nächste Eingabefeld mit der .siblings() Funktion zu bekommen. So etwas wie:

Art von chaotisch, aber das wird funktionieren. Das heißt, ich bin mir nicht sicher, warum Sie das in einem Keyup-Handler tun. Es kann dazu führen, dass mehrere On-Click-Handler für die Tags li hinzugefügt werden.

Answer 2

versuchen, die

$('input').val($this().text); 

in Ihrem keyup zu setzen Funktion wie

$(this).text(data); 

statt

$('.result').html(data);