Kann $ (this) funktioniert nicht in jQueryUI Autovervollständigen

Question

Ich versuche, ein generisches Autocomplete-Skript mit jQueryUI zu erstellen. Die zum automatischen Vervollständigung sollte für jeden arbeiten:

<input type='text' class='autocomplete' id='foo'/> 
<input type='text' class='autocomplete' id='bar'/> 
... 

Jetzt versuche ich, ‚foo‘ oder ‚Bar‘ in der Quellenfunktion mit $ (this) zugreifen, aber wenn Alarmierung ich immer ‚undefined‘ bekommen.

$('input.autocomplete').autocomplete({ 
    source: function(req, add){ 
     var id = $(this).attr('id'); 
     alert(id); 
    } 
}); 

Was mache ich falsch?

Answer 1

Richten Sie die automatische Vervollständigung für jedes Element in Ihrer Auswahl getrennt ein. Verwenden Sie dabei einen Abschluss, um einen Verweis auf das relevante Element zu halten. Etwas wie folgt aus:

$('input.autocomplete').each(function(i, el) { 
    el = $(el); 
    el.autocomplete({ 
     source: function(req, add) { 
      var id = el.attr('id'); 
      alert(id); 
     } 
    }); 
}); 

---

Alternative (edit)

Ich sehe nicht, warum es eine solche Widerstand each() zu verwenden: es funktioniert, der Code ist sehr klar und lesbar, und es bringt keine Probleme mit der Effizienz; aber wenn Sie entschlossen sind zu vermeiden, each(), hier ist eine Alternative ...

* BITTE BEACHTEN SIE: Der folgende Ansatz beruht (ein bisschen) auf den Interna von jQuery Autocomplete, so würde ich die erste Option empfehlen .. Aber die Wahl liegt bei dir.

$('input.autocomplete').autocomplete({ 
     source: function(req, add) { 
      var id = this.element.attr('id'); 
      alert(id); 
     } 
    }); 
}); 

das funktionieren wird, zumindest bis/wenn sie nicht die Art und Weise der source() Funktion innerhalb der autocomplete Plugin aufgerufen ändern.

So, Sie haben zwei Möglichkeiten ... etwas für jeden.

Answer 2

$(this) wird von Ihrer neu erstellten Funktion kommen und somit nicht funktionieren. Verschieben Sie Ihre id Deklaration über source und es sollte funktionieren.

Answer 3

Marwelin ist korrekt. 'this' verweist auf die neu erstellte Funktion, in der Sie verschachtelt sind. Dies ist leicht zu beheben, indem Sie die Variable id außerhalb der Funktion erstellen und innerhalb der Funktion verwenden.

Answer 4

Um dieses Eingabeelement zugreifen, sollten Sie Folgendes tun können:

$(this.element).val(); 

Natürlich, das bekommt nur den Wert. Sie können die anderen Attribute wie so Zugang:

$(this.element).attr('value'); // just another way to get the value 
$(this.element).attr('id'); 

auch an, dass Sie in der select event dieses Element zuzugreifen, können Sie das tun, etwa so:

$(event.target).attr('value'); 
$(event.target).attr('id');