Select Li Element on Keyup

[apfelsine]

Hi

also ich habe jetzt einige Änderungen vorgenommen und mein Event wird immer überschrieben, es übergibt nur einen Wert an setAutoComplete. Nämlich den letzten aus der Iteration.

Und das wundert dich? ;-)

Nein nicht wirklich. Was man halt so tut, wenn man sich durchhangelt.

Als drittes Argument wird darüber hinaus noch eine Referenz auf das Array übergeben, über welches iteriert wird. Aber die brauchst du hier nicht, also kann man sich die Deklaration eines dritten Parameters in diesem Fall sparen.

item = value.split(";");

An dieser Stelle liegt die Ursache für das von dir beschriebene Problem.

button.addEventListener('click', function () {
  setAutoComplete(item[0], item[1], parent, idField)
});

Was glaubst du passiert, wenn diese Funktion aufgerufen wird?

Meine Funktion tanzt Samba?...

Schließlich wird von jeder Handlerfunktion, die du innerhalb der an each übergebenen Callback-Funktion definierst, ein und dieselbe Variable referenziert, und da die Eventhandler erst ausgeführt werden, wenn die Iteration abgeschlossen ist, wird entsprechend der Wert zurückgegeben, welcher der Variable item zuletzt zugewiesen wurde.

Scherz beiseite, tja, das macht Sinn. Das führt mich dann wieder zu meiner Stringlösung zurück…

var item = value.split(';');

Was du also eigentlich möchtest, ist bei jedem Aufruf der an each übergebenen Funktion eine lokale Variable anzulegen, sodass der Wert in der Closure, also dem Funktionsabschluss konserviert wird.

und das soll dann funktionieren...? ich werde es ausprobieren.

Ich würde mich für einen Klammerstil entscheiden. Es fördert nicht unbedingt die Lesbarkeit des Codes, wenn man das mal so und mal so macht. Davon abgesehen scheint mir try und catch an dieser Stelle ziemlich überflüssig.

Mag sein, aber nicht, wenn ich ständig dran rumbastel. Ich finde die Browserkonsole auch nicht sehr benutzerfreundlich und ehrlichgesagt in Teilen ziemlich umständlich in der Handhabung sodass ich manchmal am liebsten in den Bildschirm greifen würde. Für einfache Sachen reicht mir das Alert.

Darüber hinaus kannst du im Script mit dem debugger-Statement auch Breakpoints setzen, an denen dein Programm angehalten werden soll.

…

Dann kannst du die verschiedenen Variablen und die Werte die zu einem bestimmten Zeitpunkt mit ihnen verknüpft sind im Debugger des Browsers inspizieren.

Das ist mir bekannt.

var div = document.getElementById('targetUI');

if (div != null) {
  div.appendChild(li);

Das hatte ich in meiner anderen Antwort ja schon angesprochen. Es ist extrem verwirrend, wenn du eine Variable div nennst, die eigentlich eine ul referenziert. Das ist nicht nachvollziehbar und sollte geändert werden.

Nein, weil du den Code vorher eben nicht kennst. Und targetUI IST ein DIV, an das ein Kindelement UL angehängt wird. Dieser Abschnitt wäre normalerweise ausserhalb der Schleife. Der muss nur einmal ausgeführt werden. Ich habe auch keine Lust über Sinnhaftigkeiten von Variablennamen zu diskutieren, wenn sie nicht gerade ein geschützter Begriff sind und damit die Funktionsweise beeinträchtigen würden.

            //create new listelement for station and mark as selected
            var li = document.createElement('li');
            li.type = 'li';
            if (i == 0) {
							li.className = 'selected';
            }                                
            //create button in listelement for station 
            var button = document.createElement('button');
            button.type = 'button';
            button.textContent = item[1];
            button.id = item[0];
            //if (i == 0) { //falscher Platz
                button.className = 'dropdownelement';
            //}

            //add button to listelement
            li.appendChild(button);

Auch hierfür wären entsprechende jQuery-Methoden zu verwenden, wenn du dieses Framework schon einbindest. Allerdings ist nicht alles was du hier tust sinnvoll.

Das kannst du aus meiner Perspektive nicht beurteilen. Du siehst nur einen Ausschnitt von einem Prozess. Die Historie, warum was wie so steht wie es ist, mag für mich sinnvoll gewesen sein zu diesem Zeitpunkt. Und wie ich bereits erwähnt habe, möchte ich jQuery so wenig wie möglich verwenden. Es ist drin, ob ich es nutze oder nicht. Ich habe keinen Bock mehr das es mir beim nächsten Update wieder was zerschießt. Kann ich zwar trotzdem nicht ausschließen aber na ja.

li.type = 'li';

Das ergibt zum Beispiel keinen Sinn, denn li hat kein type-Attribut.

Darüber hinaus solltest du beachten, dass die Vergabe einer Klasse selected nicht dazu führt, dass Benutzer assistiver Software

Assistiver Software??? Meinst du einen Debugger??

über den Zustand deines Widgets in Kenntnis gesetzt werden. Hier wirst also noch etwas Arbeit investieren müssen, wenn das Ganze zugänglich sein soll.

nun - ohne die Dokumentation zu wälzen habe ich einfach mal angenommen, das ich meinen Stylesheet "selected" da in class unterbringen kann. Mir ist gestern dazu nichts falsches beim testen aufgefallen. Allerdings habe ich das If an einen sinnfreien Ort gesetzt, es sollte eigentlich bei "selected" sein. Der Type bei li macht in der Tat keinen Sinn.

Danke für die Unterstützung!

apfelsine