Autovervollständigung

[hmm]

Ich habe in meiner Datenbank Nutzer gespeichert:

ID, Vorname, Nachname

1, Anna, Konda

2, Christoph, Kolumbus

3, Christoph, Kolumbus (kann ja sein, dass zwei Leute so heissen)

4, Kevin, Störenfried

Jetzt möchte ich ein Suchfeld in Html/JS schreiben, welches mir die passenden Nutzer bereits nach eingabe der ersten Buchstaben anzeigt.

Wie macht man sowas?

Beispiel:

Eingabe "Ko" -> Das Suchfeld zeigt Christoph, Kolumbus 2x an und die Anna Konda

Eingabe "Kon"-> Das Suchfeld zeigt die Anna Konda an

Meine JavaScript Funktionen sprechen die Datenbank per JsonRest an.

Meine Idee:

Für jede Buchstabeneingabe eine JsonRequest ans Backend plus eine Datzugehörige Sql Abfrage, alternativ kennt der Client alle vorhandenen Nutzernamen. Gehts besser?

[dedlfix]

Tach!

Für jede Buchstabeneingabe eine JsonRequest ans Backend plus eine Datzugehörige Sql Abfrage, alternativ kennt der Client alle vorhandenen Nutzernamen. Gehts besser?

Magie wäre eine weitere Variante. Ansonsten: nö. Entweder du hast die vollständige Liste zum Filtern bereits vorliegen oder du lässt dir eine gefilterte Liste liefern. Man kann da höchstens noch geringfügig dran drehen, indem man einen Cache auf Serverseite aufsetzt, der die Datenbankabfrage minimiert. Lohnt aber nur, wenn die Datenbank langsam ist und man sich nicht mit dem Cache-Handling verzettelt.

dedlfix.

[Christian Kruse]

Hallo hmm,

Für jede Buchstabeneingabe eine JsonRequest ans Backend plus eine Datzugehörige Sql Abfrage, alternativ kennt der Client alle vorhandenen Nutzernamen. Gehts besser?

Setze bei feuern des input-Events einen Timeout (etwa auf 500ms), der das Autocomplete anfordert. Besteht bereits ein Timeout, lösche es vorher. Etwa so:

(function(element) {
  var tm = null;
  var autocomplete = function() {
    // …
  };

  element.addEventListener('input', function() {
    if(tm) {
      window.clearTimeout(tm);
    }

    tm = window.setTimeout(autocomplete, 500);
  });
})(the_element);

So kommt kein Request zum Server, solange der User tipp; wenn er aufhört, wird der Request gestellt und die Autovervollständigung angeworfen. Man „wartet” sozusagen auf den User.

LG,
CK

[Robert R.]

Hallo,

Für jede Buchstabeneingabe eine JsonRequest ans Backend plus eine Datzugehörige Sql Abfrage, alternativ kennt der Client alle vorhandenen Nutzernamen. Gehts besser?

Setze bei feuern des input-Events einen Timeout (etwa auf 500ms), der das Autocomplete anfordert. Besteht bereits ein Timeout, lösche es vorher. Etwa so:

(function(element) {
  var tm = null;
  var autocomplete = function() {
    // …
  };

  element.addEventListener('input', function() {
    if(tm) {
      window.clearTimeout(tm);
    }

    tm = window.setTimeout(autocomplete, 500);
  });
})(the_element);

Wofür steht das (the_element) hier?

Danke für Erklärung Robert

[Christian Kruse]

Hallo Robert,

Wofür steht das (the_element) hier?

Für eine z.B. via getElementById() erzeugte Referenz auf ein Element-Objekt, in diesem Fall das Input-Element, dass man beobachten/autovervollständigen will.

LG,
CK

[Robert R.]

Hallo,

schade, ich verstehe die Syntax einfach nicht. Wieso steht das (the_element) hinten dran? Und auch wenn es vorne stünde, würde ich danach einen Punkt erwarten. Und wofür steht dann "element"?

Vielleicht hat mal jemand Zeit, ein kleines Beispiel vollständig zu zeigen? Im Wiki ist davon auch noch nichts zu finden und auf anderen Webseiten konnte ich auch nichts finden.

Danke Robert

[Christian Kruse]

Hallo Robert,

schade, ich verstehe die Syntax einfach nicht. Wieso steht das (the_element) hinten dran?

Ok, sorry. Ich dachte, die Syntax an sich wäre klar.

(function(element) {

Hiermit erstelle ich eine anonyme Funktion, die den Parameter element erwartet. Die Klammer am Anfang ist dazu da dem JS-Interpreter zu sagen, dass der Ausdruck innerhalb dieser Klammern zusammen gehört, sprich

(function(element) {
});

ist nur zur Gruppierung der Funktion da. Das darauf folgende (the_element) ist der Operator, um eine Funktion auszuführen.

(function(element) {
})(the_element);

Dies ruft also die Funktion, die in den Klammern erstellt wird, auf und übergibt eine Variable the_element als Argument. Das ist in JS ein häufig genutztes Konstrukt, um Code-Teile zu schachteln: effektiv erstelle ich so einen neuen Namensraum. Alle lokalen Variablen in dieser Funktion sind nur innerhalb der Funktion und den dort erstellten Closures verfügbar.

(function(element) {
  var tm = null;
  var autocomplete = function() {
    // …
  };

  element.addEventListener('input', function() {
    if(tm) {
      window.clearTimeout(tm);
    }

    tm = window.setTimeout(autocomplete, 500);
  });
})(the_element);

Sowohl die Variable tm als auch autocomplete ist also von außen nicht verfügbar. So leaken Variablen nicht in fremde Namespaces.

Wenn du noch Fragen hast: frag!

LG,
CK

[Robert R.]

Hallo,

dankeschön. Das heißt dann, dass die (äußere) Funktion dann sofort nachdem sie definiert ist ausgeführt wird? Wenn man den Operator weglassen würde, könnte man sie gar nicht benutzen, weil sie ja anonym deklariert wurde?

LG Robert

[Christian Kruse]

Hallo Robert,

Das heißt dann, dass die (äußere) Funktion dann sofort nachdem sie definiert ist ausgeführt wird? Wenn man den Operator weglassen würde, könnte man sie gar nicht benutzen, weil sie ja anonym deklariert wurde?

Exakt.

LG,
CK

[dedlfix]

Tach!

Das ist in JS ein häufig genutztes Konstrukt, um Code-Teile zu schachteln:

Ergänzung: Man nennt es auch IIFE - Immediately Invoked Function Expression.

dedlfix.

[Matthias Apsel]

Hallo Christian Kruse,

Wenn du noch Fragen hast: frag!

Magst du dazu ein bisschen im Wiki hinzufügen?

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Wenn du noch Fragen hast: frag!

Magst du dazu ein bisschen im Wiki hinzufügen?

Ich weiss ehrlich gesagt nicht, was ich dazu schreiben soll. Es steht doch schon alles in dem Artikel, was man wissen muss? Ich will hier nicht trollen, sondern mir fehlt tatsächlich die Vorstellung, was da noch zu zu schreiben ist.

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Ich weiss ehrlich gesagt nicht, was ich dazu schreiben soll. Es steht doch schon alles in dem Artikel, was man wissen muss? Ich will hier nicht trollen, sondern mir fehlt tatsächlich die Vorstellung, was da noch zu zu schreiben ist.

Ich finde, dein Forumsbeitrag erklärt die Problematik besser als der Wikiartikel.

Bis demnächst
Matthias

[RR]

Hallo,

ich kann leider nicht voten. Aber mein ⬆️ (Daumen hoch finde ich gerade nicht) für Christians Erklätung und deine Einschätzung. Durch die kleinen Schritte habe ich es verstanden, dass das ein Parser-Pattern (oder Interpreter-Pattern?) ist und werde es hoffentlich demnächst auch wiedererkennen und vielleicht auch selber benutzen können.

Eine Frage (Teil a, b, c) bleibt für mich aber noch:

• a) Was passiert mit der anonymen Funktion, wenn man den anschließenden Operator nicht setzt?
• b) Was passiert mit der anonymen Funktion, wenn man den anschließenden Operator nicht setzt, aber vorher eine globale Variable 'element' erstellt?
• c) Was passiert mit der anonymen Funktion, wenn man vorher eine globale Variable 'element' erstellt hat, aber den anschließenden Operator (the_element) trotzdem angibt?

Vielen Dank nochmal
RR

[dedlfix]

Tach!

Eine Frage (Teil a, b, c) bleibt für mich aber noch:

• a) Was passiert mit der anonymen Funktion, wenn man den anschließenden Operator nicht setzt?
• b) Was passiert mit der anonymen Funktion, wenn man den anschließenden Operator nicht setzt, aber vorher eine globale Variable 'element' erstellt?
• c) Was passiert mit der anonymen Funktion, wenn man vorher eine globale Variable 'element' erstellt hat, aber den anschließenden Operator (the_element) trotzdem angibt?

Es gibt keinen Unterschied zum Aufruf von anderen (um nicht zu sagen: normalen) Funktionen.

a) Wenn man die Klammern nebst Inhalt weglässt, dann wird die Funktion nicht aufgerufen. Da sie anonym ist, und von keiner Variable referenziert wird, passiert genau gar nichts. Der Parser hat nur umsonst eine nicht nutzbare Funktion angelegt.

b) wie a)

Wenn du allerdings meintest, die Klammern zwar zu notieren, aber keinen Inhalt anzugeben, dann passiert das, was innerhalb der Funktion vorgesehen ist, wenn ein undefined übergeben wird. Oder es kommt zu einem Fehler oder anderen Nebenwirkungen, wenn undefined nicht berücksichtigt wird.

c) mit dem globalen element passiert nichts. Der Parameter element überlagert innerhalb der Funktion die globale Variable.

dedlfix.

[Christian Kruse]

Hallo RR,

• a) Was passiert mit der anonymen Funktion, wenn man den anschließenden Operator nicht setzt?

Der Garbage Collector kommt vorbei und räumt sie weg.

• b) Was passiert mit der anonymen Funktion, wenn man den anschließenden Operator nicht setzt, aber vorher eine globale Variable 'element' erstellt?

Der Garbage Collector kommt vorbei und räumt sie weg… äh, ich verstehe die Frage nicht. Der globale Scope ist doch unabhängig von dem Funktionsscope. Die „globale” Variable hat nichts mit der inneren zu tun.

• c) Was passiert mit der anonymen Funktion, wenn man vorher eine globale Variable 'element' erstellt hat, aber den anschließenden Operator (the_element) trotzdem angibt?

Der Operator ist (), das the_element war nur ein Platzhalter für das Argument; das könnte z. B. var the_element = document.getElementById("autocomplete-input"); sein.

Ansonsten: wie gesagt, durch die beiden unterschiedlichen Scopes ist die innere, lokale Variable nicht nach außen sichtbar und „shadow”ed die äußere Variable. Will heißen: im Funktions-Körper ist die globale Variable nur noch über window.element erreichbar, über element nicht mehr:

element = "foo";
(function(element) {
  console.log(window.element);
  console.log(element);
})("bar");

Ausgabe: foo, bar.

Das nennt man „shadowing” und ist häufig ein Hinweis auf einen Bug, weshalb viele Compiler und Interpreter dafür Warnings generieren; in diesem Fall ist das aber erwünscht und man nutzt den Effekt absichtlich zur Kapselung.

LG,
CK

[RR]

Hallo an dedlix und Christian,

so langsam lösen sich auch die letzten Knoten. So gut hat das bisher leider noch niemand erklart! Ich freue mich, wenn es auch Nachlesern mit den selben Verständnisschwierigkeiten helfen wird. Ich habe das Dumme- Fragen-Stellen jetzt mal vertretungsweise übernommen.

Die Verständnisschwierigkeiten bestanden zwischen

• Parser-Pattern, also der Syntax für die Programmiersprache
• Deklaration der Funktion (Signatur)
• Definition der Funktion (Körper)
• Benutzung/Aufruf der Funktion.

Ich habe das also so verstanden:
Da hier ein impliziter Funktionsaufruf erfolgt, wird also auch der Platzhalter (element), der bei der Funktionsdeklaration zum inneren Namensraum gehört, nicht gegen die (globale) Variable (element) ersetzt, die beim expliziten Funktionsaufruf aus dem äußeren Namensraum der Funktion kommen würde.

Ich hoffe nur, dass mich die Wissenden nun noch verstehen können :-)

LG RR

[Christian Kruse]

Hallo RR,

Da hier ein impliziter Funktionsaufruf erfolgt, […]

Es ist ein expliziter Funktionsaufruf 😀

wird also auch der Platzhalter (element), der bei der Funktionsdeklaration zum inneren Namensraum gehört, nicht gegen die (globale) Variable (element) ersetzt, die beim expliziten Funktionsaufruf aus dem äußeren Namensraum der Funktion kommen würde.

Ich verstehe nicht so richtig, was du mit dem letzten Teilsatz meinst. Aber auch, wenn ich eine benannte Funktion habe, gilt das Scoping genau so wie hier in diesem Fall:

element = "foo";
function namedFun(element) {
  console.log(window.element);
  console.log(element);
}

namedFun("bar");

Ausgabe: foo, bar. Der Grund, warum man solche IFEs verwendet, ist halt, dass wirklich gar nichts in den globalen Namensraum leakt. Die Funktion ist anonym, der Parameter gehört zum Scope der Funktion und die lokalen Variablen auch.

LG,
CK

[RR]

Hallo Christian,

element = "foo";
function namedFun(element) {
  console.log(window.element);
  console.log(element);
}

namedFun("bar");

ich meinte

element = "foo";
namedFun(element)`; 

Hier ist (element) die Variable aus dem übergeordneten Namensraum.
Es ist immer verwirrend, wenn in der Signatur dieselben Bezeichner benutzt werden, wie später beim Aufruf für die übergebenen Variablen.

LG
RR

[Christian Kruse]

Hallo RR,

element = "foo";
namedFun(element)`; 

Hier ist (element) die Variable aus dem übergeordneten Namensraum.

Naja, jain. Sie hat denselben Wert.

function foo(bar) {
  console.log(bar);
  console.log(window.bar);
  bar = "bob";
  console.log(bar);
  console.log(window.bar);
}

bar = "baz";
foo(bar);
console.log(bar);

LG,
CK

[RR]

Haha,

da zeigst Du jetzt die erste Hälfte vom Unterschied zwischen Call by (ich würde sagen: "with") Value und Call by (ich würde sagen: "with") Reference.

Ist das denn in JS auch möglich, die Funktion mit einer Referenz auf das Objekt oder die Variable aufzurufen?

[Christian Kruse]

Hallo RR,

da zeigst Du jetzt die erste Hälfte vom Unterschied zwischen Call by (ich würde sagen: "with") Value und Call by (ich würde sagen: "with") Reference.

Ja 😀

Ist das denn in JS auch möglich, die Funktion mit einer Referenz auf das Objekt oder die Variable aufzurufen?

Nicht so, wie man es von C aus kennst. Aber: alle Objekte sind Referenzen, wenn du also das Objekt selbst veränderst, wirkt sich das aus:

function foo(obj) {
  obj.foo = "bar";
}

obj = {};
foo(obj);
console.log(obj);

Die Variable selbst allerdings kann keine Referenz sein:

function foo(obj) {
  obj = "bar";
}

obj = {};
foo(obj);
console.log(obj);

LG,
CK

[Rolf b]

Ich habe mal etwas im Glossar:IIFE Artikel rumgetippert. Hoffentlich habe ich es damit nicht schlimmer gemacht :)

Rolf

[Christian Kruse]

Hallo Rolf,

Ich habe mal etwas im Glossar:IIFE Artikel rumgetippert. Hoffentlich habe ich es damit nicht schlimmer gemacht :)

Danke. Mir fällt sowas sehr schwer, ich habe schon die ganze Zeit überlegt, was ich da jetzt eigentlich schreiben soll…

Ich habe mal ein paar Fehler verbessert. Etwa die Klammerung um den Funktionsaufruf im 4. Beispiel, die ist absolut erforderlich. Das Weglassen führt zu einem Parse Error.

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse, hallo @Rolf b

Ich habe mal etwas im Glossar:IIFE Artikel rumgetippert. Hoffentlich habe ich es damit nicht schlimmer gemacht :)

Ich habe mal ein paar Fehler verbessert.

Danke euch beiden, ich versteh es jetzt besser als vorher.

Bis demnächst
Matthias

[Rolf b]

Hallo Christian,

danke für die Dippväler-Korrektur. Ich hatte es eigentlich Korrektur gelesen, war aber wohl doch noch zu eilig. Die Begriff "Closure" hatte ich mir unter Schmerzen verkniffen, ich wollte nicht zu sehr vom IIFE Thema abkommen :) Aber ok, jetzt steht er da und du hast es schön kompakt gelassen. Hätte ich nicht geschafft ;)

Ich verstehe aber dein Problem mit dem 4. Beispiel nicht. Mit welcher JS Version hast Du in

alert(function(x) { return x+3;}(7));

Fehler bekommen? Die Mehrdeutigkeit entsteht eigentlich nur am Anweisungsbeginn durch die Verwexelung mit der klassischen Funktionssyntachs.

IE 11, Firefox 52 und Chrome 57 sind ohne Klammern zufrieden und zeigen den alert an.

Rolf

[Christian Kruse]

Hallo Rolf,

Ich verstehe aber dein Problem mit dem 4. Beispiel nicht. Mit welcher JS Version hast Du in

alert(function(x) { return x+3;}(7));

Fehler bekommen?

Zum Beispiel „ältere” Webkits (etwa Safari in der aktuellen Version schmeisst einen parse error). Klammern einfach immer machen. 😀

IE 11, Firefox 52 und Chrome 57 sind ohne Klammern zufrieden und zeigen den alert an.

Schau dir halt auch mal was älteres als bleeding edge an 😝

LG,
CK

[Rolf b]

Guter Plan. Aber wo? Ich habe keine Museumsfarm (oder VM-Farm mit Alt-Browsern). Die Web-Parks für Retro-Tests, die ich gefunden habe, wollen Geld dafür. Mein Arbeitgeber hat eine kontrollierte Umgebung und braucht das darum nicht. Und zu Hause ist es Hobby, da will ich das nicht bezahlen...

Rolf

[Christian Kruse]

Hallo Rolf,

Guter Plan. Aber wo?

Ach, lass dich nicht ärgern, ich habe nur lästern wollen.

Ich habe keine Museumsfarm (oder VM-Farm mit Alt-Browsern). Die Web-Parks für Retro-Tests, die ich gefunden habe, wollen Geld dafür. Mein Arbeitgeber hat eine kontrollierte Umgebung und braucht das darum nicht. Und zu Hause ist es Hobby, da will ich das nicht bezahlen...

Naja, ein aktueller Safari ist IMHO noch nicht Retro 😉 aber ja, das mit dem Testen ist ein echtes Problem, ich weiß. Ich habe das Glück ein Macbook von der Arbeit bekommen zu haben, für den Rest benutze ich VMs.

LG,
CK

[JürgenB]

Hallo Christian,

… aber ja, das mit dem Testen ist ein echtes Problem, ich weiß. Ich habe das Glück ein Macbook von der Arbeit bekommen zu haben, für den Rest benutze ich VMs.

und wie testest du die Smartphones und Tablets? Ständig Besucher fragen „Kann ich mal den Smartphone haben?“ ist ja auch lästig.

Wäre ein Testbereich (ohne Archiv) nichts fürs Forum?

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

… aber ja, das mit dem Testen ist ein echtes Problem, ich weiß. Ich habe das Glück ein Macbook von der Arbeit bekommen zu haben, für den Rest benutze ich VMs.

und wie testest du die Smartphones und Tablets?

Mit der Responsive-Funktion vom Chrome und Firefox. Gut ist anders, aber für ein device lab hab ich keine Kohle.

Wäre ein Testbereich (ohne Archiv) nichts fürs Forum?

Ich verstehe nicht, was du meinst. „Bitte testen”-Threads bzw. ein „Bitte testen”-Subforum?

LG,
CK

[JürgenB]

Hallo Christian,

… aber für ein device lab hab ich keine Kohle.

so wird es vielen gehen.

Wäre ein Testbereich (ohne Archiv) nichts fürs Forum?

Ich verstehe nicht, was du meinst. „Bitte testen”-Threads bzw. ein „Bitte testen”-Subforum?

ein Subforum, das nur dem Testen dient und auch nur diesen Betreff (z.B. Browsertest) kennt. Man gibt eine URL an, sowie Browser und System, unter denen der Test gewünscht ist. Evtl. noch einen kurzen Kommentar, worauf beim Test geachtet werden soll. Der Tester gibt dann nur an, unter welcher Umgebung getestet wurde und ob es geklappt hat, bzw. die Fehlermeldung. Screenshots könnten auch hilfreich sein.

Der Testaufruf hat ein Verfallsdatum, kann aber vom „Auftragsgeber“ auch schon vorher geschlossen/gelöscht werden. Evtl. kann das ganze über eine Eingabemaske formalisiert werden.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

… aber für ein device lab hab ich keine Kohle.

so wird es vielen gehen.

Open Device Labs kennt ihr?

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

… aber für ein device lab hab ich keine Kohle.

so wird es vielen gehen.

Open Device Labs kennt ihr?

Ja. Gibts hier nicht.

LG,
CK

[JürgenB]

Hallo,

… aber für ein device lab hab ich keine Kohle.

so wird es vielen gehen.

Open Device Labs kennt ihr?

Ja. Gibts hier nicht.

und bei den Open Device Labs muss man, wenn ich das richtig sehe, vor Ort selbst testen, was bei umfangreichen Test sicher unerlässlich ist. Ich dachte da eher an einfache Tests wie „Funktioniert das Script?“ oder „Kann man die Navigation auch unter Android x.y nutzen?“

Gruß
Jürgen

[Rolf b]

Nein, kannte ich nicht. Ist aber eine nette Idee, und es gibt ja gleich 4 hier in Köln!

Aber welcher Softwareentwickler will denn sein Gesäß vom Sitzmöbel erheben, um zu testen? Ts, ist doch total weltfremd (Bauch streichel)...

Rolf

[Christian Kruse]

Hallo Rolf,

Aber welcher Softwareentwickler will denn sein Gesäß vom Sitzmöbel erheben, um zu testen? Ts, ist doch total weltfremd (Bauch streichel)...

Ich habe letzte Woche bei der Kraftmessung einen neuen persönlichen Rekord in der Beinpresse erzielt: 370kg. Bin jetzt bei 20 Wiederholungen mit 190kg – bin ich weltfremd? 😂😝

LG,
CK

[Rolf b]

Ich weiß nicht, wie die Anzeige "95" der Milon 45° Beinpresse zu lesen ist - ob das 95kg entspricht. Fühlt sich zumindest so an. Aber ich bin ja auch erst seit einem guten Jahr dabei und habe mit Bandscheibenvorfall angefangen.

MIR ist der jedenfalls schon der Weg ins Testlabor (vom 9. Stock in den 1. hinunter) definitiv zu weit, um „nur mal eben“ was zu probieren. Bzw. ich komme auf dem Weg dahin an der Cafeteria vorbei, und das ist ziemlich schädlich für die Kondition 🍨 🍰 ☕️

Rolf

[JürgenB]

Hallo,

… Bzw. ich komme auf dem Weg dahin an der Cafeteria vorbei,

die Seiten müssen ja auch getestet werden, wenn eine Hand durch den Kuchen blockiert ist.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

… Bzw. ich komme auf dem Weg dahin an der Cafeteria vorbei,

die Seiten müssen ja auch getestet werden, wenn eine Hand durch den Kuchen blockiert ist.

Sag ich doch, bzw. Adrian Roselli:

LLAP 🖖

[JürgenB]

Hallo Gunnar,

wobei auch auf Geräten ohne Maus die einhändige Bediehnung funktionieren muss.

Gruß
Jürgen

[Christian Kruse]

Hallo Rolf,

Ich weiß nicht, wie die Anzeige "95" der Milon 45° Beinpresse zu lesen ist - ob das 95kg entspricht. Fühlt sich zumindest so an.

Das wäre etwas wenig, jeder Mensch, der in der Lage ist Treppen zu steigen kann das doppelte seines eigenen Körpergewichts stemmen: beim Treppen steigen stemmst du mit einem Bein dein volles Körpergewicht.

Aber ich bin ja auch erst seit einem guten Jahr dabei

Ich sogar noch kürzer: seit einem halben. Vorher bin ich nur Laufen gegangen, aber dann habe ich Probleme mit dem Rücken bekommen und habe deshalb mit dem Fitness-Studio angefangen gezielt Muskulatur aufzubauen und Muskelgruppen zu trainieren. Und inzwischen gehe ich 2-3 mal die Woche ins Fitness-Studio und 2-3 mal die Woche joggen, so dass ich insgesamt 5-6 mal die Woche Sport treibe. Wobei ich das joggen liebe und nicht aufgeben möchte aber ins Fitness-Studio nur gehe, um gesund zu bleiben 😉

und habe mit Bandscheibenvorfall angefangen.

Oh je, ich hoffe, es geht besser!

MIR ist der jedenfalls schon der Weg ins Testlabor (vom 9. Stock in den 1. hinunter) definitiv zu weit, um „nur mal eben“ was zu probieren. Bzw. ich komme auf dem Weg dahin an der Cafeteria vorbei, und das ist ziemlich schädlich für die Kondition 🍨 🍰 ☕️

Jeder Gang macht schlank! Und je öfter du die Treppe runter und vor allem hoch läufst, desto öfter kannst du ungestraft die Cafete 🍨 🍰 ☕️ besuchen! 😉

LG,
CK

[Martl]

Hallo hmm,

Wie macht man sowas?

sofern die Datenmenge halbwegs übersichtlich ist:

1. wiki lesen,
2. <datalist> beim Ausliefern der Datei einbauen (lassen),
3. fertig!

Grüße, Martl

[Camping_RIDER]

Aloha ;)

Wie macht man sowas?

sofern die Datenmenge halbwegs übersichtlich ist:

1. wiki lesen,
2. <datalist> beim Ausliefern der Datei einbauen (lassen),
3. fertig!

Gute Antwort. Allerdings: Browserunterstützung beachten! Da gibts leider noch große rote Blöcke (Safari vor allem) und viel partial support mit Bugs.

Grüße,

RIDER

[Martl]

Hallo RIDER,

… Allerdings: Browserunterstützung beachten!

ich warte immer noch darauf, daß die Browser endlich mal die User-Unterstützung beachten :)

(https://why-i-cant-use/a-fatal-list/, leider gibts die Seite nicht)

Grüße, Martl

[Gunnar Bittersmann]

@@hmm

Für jede Buchstabeneingabe eine JsonRequest ans Backend plus eine Datzugehörige Sql Abfrage

Das dürfte wohl zu langsam sein.

alternativ kennt der Client alle vorhandenen Nutzernamen.

Das Feature ist nur für dich als Admin? Ansonsten wären da wohl Datenschutzaspekte zu beachten: ob jeder Nutzer die Namen von allen anderen sehen darf.

Gehts besser?

Awesomplete.

LLAP 🖖

[hmm]

Das soll jeder Nutzer machen können. Bei Facebook geht das auch sofern die unsichtbar Funktion nicht aktiviert ist. Die Seite die ich baue ist nur zur Firmeninternen verwendung, aber ich wollte das Ding als Grundlage für ein eigenes Projekt nehmen.

[Camping_RIDER]

Aloha ;)

alternativ kennt der Client alle vorhandenen Nutzernamen.

Das Feature ist nur für dich als Admin? Ansonsten wären da wohl Datenschutzaspekte zu beachten: ob jeder Nutzer die Namen von allen anderen sehen darf.

Nun ja. Das ist ja eine Frage, die man sich grundsätzlich stellen muss und die mit der technischen Umsetzung weniger zu tun hat. Bei jeder Eingabe mit autocomplete muss der Datenschutzaspekt vorher abgeklärt sein, unabhängig davon, ob der Client in der technischen Umsetzung (bspw. im JavaScript) alle vorhandenen Nutzernamen kennt oder nicht.

Grüße,

RIDER

[hmm]

okay, danke.

ich bin bald soweit das einzubauen, wahrscheinlich heute oder donnerstag.

wie sollte ich das jetzt am besten machen?