Select Li Element on Keyup

[Orlok]

Nur mal so nebenbei bemerkt und zusätzlich zu dem, was Gunnar bereits sagte …

<li onclick="javascript:setAutoComplete()">

Du könntest hier auch folgendes schreiben:

<li onclick="php:setAutoComplete()">

Das funktioniert. Magic!

Jedenfalls habe ich den Verdacht, dass du nicht wirklich weißt, was du hier tust, denn anders kann ich mir die Verwendung dieser Syntax an dieser Stelle nicht erklären.

Was du hier verwendest ist ein sogenanntes Labelled Statement, welches sich zusammensetzt aus einem Bezeichner für das Label, einem Doppelpunkt sowie einem weiteren Statement. Dieses Konstrukt wird selten verwendet und wenn, dann meist im Zusammenhang mit verschachtelten Schleifen.

outerLoop:
for (let i = 0; i < 5; i++) {

  innerLoop:
  for (let j = 0; j < 5; j++) {

    if (condition) {
      continue outerLoop;
    }

  }

}

Indem man den Schleifen durch das Label einen Namen zuweist, kann man mit den Statements break und continue steuern, welche Schleife abgebrochen oder fortgesetzt werden soll.

Die einzige weitere halbwegs sinnvolle Anwendung für ein Label ist in Verbindung mit Blöcken für Anweisungen, denen ebenfalls auf diese Art ein Name zugewiesen werden kann. Hier kann die weitere Ausführung eines Anweisungsblocks mit break unterbunden werden.

outerBlock: {

  innerBlock: {

    if (condition) {
      break outerBlock;
    }

  }

}

Das führt allerdings zu schlecht lesbarem Code und wird daher fast nie verwendet.

Wie anfangs erwähnt, kann hinter dem Doppelpunkt jedoch irgendein Statement stehen, dass heißt, ein Label kann nicht nur auf die zuvor beschriebenen Arten verwendet werden, sondern zum Beispiel auch zusammen mit einer Call Expression, also einem Funktionsaufruf.

Eben so, wie du das in deinem Beispielcode mit dem Label javascript machst:

javascript:setAutoComplete()

Das erzeugt aus genanntem Grund keinen Syntaxfehler, ist aber natürlich vollkommen sinnfrei, denn das Label kann von nirgendwo referenziert werden, und selbst wenn, könnte man nichts damit anfangen.

Auch als Annotation wäre es ziemlich überflüssig, denn was für Code sollte an dieser Stelle denn sonst ausgeführt werden?

Naja, genau genommen sollte an dieser Stelle überhaupt kein Code ausgeführt werden.

Eventhandler über Attribute zu registrieren ist ziemlich schlechte Praxis. Markup und Scriptcode sollte nicht miteinander vermischt werden, ebensowenig wie HTML und CSS, denn das führt zu schlecht les- und wartbarem Code.

Registriere deine Eventhandler im Script und verwende hierzu die auf allen Elementen sowie einigen anderen Objekten definierte Methode addEventListener, oder, wenn du ohnehin jQuery einbindest, die von diesem Framework bereitgestellten Methoden.

document.querySelector('button').addEventListener('click', function (event) {

  setAutoComplete(...);

});

Die Methode addEventListener erwartet als erstes Argument einen String mit dem Typ des Ereignisses, hier also click, ohne das Prefix on, und als zweites Argument die Funktion die beim Eintritt des Ereignisses aufgerufen werden soll.

$('button').click(function (event) {

  setAutoComplete(...);

});

jQuery bietet für das Event click sogar eine eigene Methode an. Es ist also nichtmal nötig die Methode on zu bemühen.

Solltest du dich für eine JavaScript-Lösung entscheiden, dann hoffentlich auch dafür, interaktive Elemente wie Buttons zu verwenden, damit deine Seite auch von solchen Benutzern verwendet werden kann, die auf eine funktionierende Tastaturbedienung angewiesen sind.

Wenn du das machst, dann brauchst du dich auch nicht um das Abfangen von Tastaturevents wie zum Beispiel keydown zu kümmern, denn wenn ein interaktives Element durch eine Tastatureingabe aktiviert wird, dann wird auch ein click Event ausgelöst.

Aber vielleicht brauchst du hier ja auch gar kein JavaScript.