Jquery Autocomplete funktioniert nicht richtig

Question

Ich benutze jquery autocomplete.In meinem Fall habe ich mehrere Autocomplete Textbox und versteckte Feld auf meiner Seite. zB

<input class='myclass' type='text'> </input> 
<input class='.emp_num_hidden' type='hidden'> </input> 
<input class='myclass' type='text'> </input> 
<input class='.emp_num_hidden' type='hidden'> </input> 

und so weiter ...

so, wenn ich Änderung auf verstecktes Feld Ereignis ausgelöst, dann wird es unten mehrere Zeit angehoben ist mein Code:

$(".myclass").each(function() { 

var $empName= $(this); 
var $empNumber = $empName.next('input:hidden'); 
//things to do 
//Setting variable e.g url... 

$empName.autocomplete(url,{ 

//code... 

}).result(function(event,data,formatted) 
{ 
$empNumber.val(formatted).change(); 
}); 
}); 

In obigem Code $ empNumber enthält das versteckte Feld, in dem der Autocomplete-Wert gespeichert wird, dh in diesem Fall wählen wir bei einen beliebigen Text aus der Autovervollständigung, dann wird die Nummer der ausgewählten Mitarbeiter in einem versteckten Feld gespeichert. Basierend auf diesem versteckten Feldwert möchte ich einen Ajax-Anruf ausführen, der basierend auf seiner Angestelltennummer vollständige Details des Mitarbeiters zurückgibt. Also habe ich händler geschrieben, um das Ereignis des versteckten Feldes wie folgt zu ändern.

$(.emp_num_hidden).on('change',function (

)}; 

Hier ist 'emp_num_hidden' die Klasse des versteckten Feldes.

Bitte schlagen Sie vor, wie ich mehrere Ereignisse bei versteckten Feldänderungen verhindern kann.

Answer 1

Dies geschieht mit dem $(this) Objekt. Da das Ereignis change ein Ziel hat, wirkt es nur auf ein Element. Die Callback-Funktion wird auf diesem Element this ausgeführt. Zum Beispiel:

$(".emp_num_hidden").on('change', function (e){ 
    alert($(this).val()); 
}); 

Was passiert, ist, dass ein Alarm-Fenster, wenn das Feld geändert wird ausgeblendet wurde, von der Mitarbeiternummer, die nur diesem verstecktes Feld. Sie werden außerdem feststellen, dass Ihr Code einige Korrekturen enthält.

Persönlich würde ich sowohl id als auch class Attribute auf Ihre Objekte verwenden. Dies gibt Ihnen einen großen Spielraum und engen Spielraum für Ihre Selektoren.

Beispiel:

HTML

<input class='myclass' type='text' id='entry-txt-1' /> 
<input class='emp_num_hidden' type='hidden' id='hide-txt-1' /> 
<input class='myclass' type='text' id='entry-txt-2' /> 
<input class='emp_num_hidden' type='hidden' id='hide-txt-2' /> 

jQuery

$(function(){ 
    var $empName, $empNumber; 

    $(".myclass").each(function(key, el) { 
    $empName= $(el); 
    $empNumber = $empName.next("input[type='hidden']"); 
    // things to do 
    // Setting variable e.g url... 
    $empName.autocomplete(url, { 
     //code... 
    }).result(function(e, d, f){ 
     $empNumber.val(f).change(); 
    }); 
    }); 
    $(".emp_num_hidden").on('change', function(e){ 
    var empId = $(this).attr("id"); 
    var $employeeNumberField = $("#" + empId); 
    // Do the needful... 
    }); 
}); 

dies ein bisschen weiter machen, können Sie die Verwendung von Datenattributen machen zu betrachten. Sie können sich auch das Ereignis select für Autocomplete ansehen. Etwas wie:

$(function(){ 
    $(".myclass").autocomplete({ 
    source: url, 
    select: function(e, ui){ 
     $(this).val(ui.item.label); 
     $(this).data("emp-number", ui.item.value); 
     $.post("employeedata.php", { n: ui.item.value }, function(data){ 
     $("#empData").html(data); 
     }); 
     return false; 
    } 
    }); 
}); 

Dies setzt voraus, dass url gibt ein Array von Objekten mit label und value Eigenschaften. Dies würde die Mitarbeiternummer als data-emp-number-Attribut zu dem Feld hinzufügen, aus dem der Benutzer eine Auswahl getroffen hat. Die label ist ihr Angestellten Name, und die value ist ihre Angestellten Nummer. Sie können diesen Rückruf auch verwenden, um alle anderen Mitarbeiterdaten basierend auf der Mitarbeiternummer anzuzeigen.

Ein Arbeitsbeispiel: https://jsfiddle.net/Twisty/zmevd0r0/