Function und return

[Rolf B]

Hallo sascha321,

falls Du nach dem Ausbruch der Flamewars noch mitliest…

jQuery beginnt tatsächlich, obsolet zu werden. Vieles, was früher ohne jQuery ein Krampf war, wird heute von den Browsern unterstützt, vor allem EINHEITLICH unterstützt.

Aber wenn Du an jQuery gewöhnt bist, spricht sicher nichts dagegen, es weiter zu benutzen. Verwendest Du die aktuelle Version (jquery-3.3.1.min.js)?

Problem ist nur: Auch jQuery entwickelt sich weiter. Zum Beispiel ist das Registrieren eines Ready-Handlers auf diverse Weisen möglich, aber nur eine davon gilt bei jQuery nicht als missbilligt, nämlich diese:

$(function() {
   // dinge die bei ready zu tun sind
});

Das ist auch die kompakteste Variante; es ist also ganz nett, sich daran zu gewöhnen.

Zweitens: Du solltest NICHT das keyup Event verwenden, um Textänderungen eines Eingabefeldes mitzubekommen. Hier gibt es bessere Events. Nachteil 1 von Keyup: Es feuert auch bei Shift-Tasten oder den Pfeilen. Nachteil 2 von Keyup: Es feuert NICHT, wenn Du Text in das Suchfeld per Cut+Paste einfügst. Ob es auf einem Gerät mit Bildschirm-Tastatur feuert, ist unsicher. Mit Windows-Bildschirmtastatur kommt es, ob es auf Android ähnlich ist, weiß man nicht. Besser ist das input-Event, das feuert bei jeder Änderung eines Textfeldes.

Drittens: Wenn Du schon jQuery verwendest, dann nutze es auch für AJAX. Es gibt da ein paar praktische Helper.

Viertens: JavaScript ist eine Sprache, mit der man wunderbar funktional programmieren kann. jQuery verwendet an vielen Stellen Callback-Funktionen, um für asynchrone Aktivitäten die Fortsetzung bereitstellen zu können. Das kannst Du auch selbst nutzen.

Fünftens: Funktionen benennt man nach Möglichkeit sprechend. Eine Funktion „ajax_reguest“ zu nennen, ist nicht gut, weil der Name nicht sagt, was die Funktion inhaltlich tut (vom Schreibfehler reguest statt request mal abgesehen; offenbar hast Du dich da mal verhört).

$("#search").on("input", function(evt) {
   if (this.value.length > 3) {
      sucheBegriff(this.value, function(ergebnis) {
         // Dinge, die mit dem Ergebnis zu erledigen sind
         alert(ergebnis);
      });
   }
});

function sucheBegriff(suchBegriff, ergebnisBehandler) {
   $.post(
      "search.php", 
      { searchoption: "suche", searchvalue: suchBegriff },
      ergebnisBehandler,
      "text");
}

Das Auslesen des Textes im Suchfeld kann man mit this.value machen, dazu braucht es weder $(this).val() noch $("#search").val().

Die jQuery.post-Funktion hat den Vorteil, dass sie sich um die Codierung der Parameter selbst kümmert. Dein Code tut das nicht, ein Zeichen mit Sonderbedeutung im Suchfeld (z.B. &, =, # oder sogar ein Leerzeichen) würde den Aufruf durcheinanderbringen. Wenn Du die Daten als Objekt angibst, verpackt jQuery sie für dich als FormData.

Den Ergebnisbehandler kannst Du dann direkt an jQuery durchreichen. Wenn die Daten da sind, wird er von jQuery aufgerufen. Wenn Du vom Server nicht nur Text zurückgibst, sondern eine Datenstruktur, solltest Du Dich mit den alternativen dataType-Angaben im vierten Parameter befassen, die jQuery unterstützt.

Hier geht's zur Dokumentation

Man könnte auch die jQuery-Promises verwenden und die Sache noch etwas eleganter machen, aber ich will jetzt nicht zu viel auf einmal bringen.

Rolf