kostenloser Webspace werbefrei: lima-city

Löschen von Input-Felder und autocomplete

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   schmevin

   schmevin hat kostenlosen Webspace.

   10:37, 18.9.2012

   Hi Leute,
   habe folgendes Problem: Ich nutze eine Google-Search ähnliche Eingabehilfe mit Ajax und JQeury bei dynamsich erstellten Input-Feldern, jedoch ist noch ein Bug drin. Wenn ich aus der Auswahlliste einen Vorschlag ausgewählt habe und danach das Feld wieder löscht, bleibt der Text untendrunter stehen. Erst wenn man auf den Text drauf klickt, geht er wieder weg.
   
   

   Hier der Code:
       /********************************* dynamische Felder erzeugen *********************************/
        
       // Zeilenzahl
           var zeile = 0;
        
       // Bezeichnung der Zeile    
           var bezeichnung;
        
       // Fuegt neues Eingabefeld hinzu
       function add_input()
       {
               // Fuegt in der Tabelle eine neue Zeile tr hinzu
                   var tr = document.getElementById('lkw_waage').insertRow(zeile);
               // ID der Zeile lautet a1, a2, a3, ...  
                   tr.id = 'a' + zeile;
        
               // Erstellen des Bezeichnungs-Textes vor dem Eingabefeld
                   var txt = document.createTextNode(bezeichnung);
        
               // Erstellen einer Datenzelle
                   var td = document.createElement('td');
        
               // Erstellen eines Eingabefeldes
                   var input = document.createElement('input');
                   input.type = 'text';
               // ID und Name des Eingabefeldes lauten eingabe1, eingabe2, eingabe3, ...
                   input.name = 'eingabe' + zeile;
                   input.id = 'eingabe' + zeile;
                   input.size = '60';
        
               // Text und Eingabe Feld in Zellen einfügen
                   td.appendChild(txt);
                   td.appendChild(input);
        
               // Zellen werden in temporäre Tabellenzeile eingefügt
                   tr.appendChild(txt);
                   tr.appendChild(td);
                   
                   // Weitere Zelle erstellen für 'zurueck'-Button ab der zweiten Zeile
                       if (zeile > 1)
                       {
                           var td2 = document.createElement('td');
                           var button = document.createElement('input');
                               button.type = 'button';
                               button.value = 'zurueck';
                               button.inputClass  = 'button_delete';
                               button.onclick = function f()
                               {
                                   delete_row();
                               };
                           td2.appendChild(button);
                           tr.appendChild(td2);
                       }
        
               // Focus auf das neue Eingabefeld setzten
                   document.getElementById(input.name).focus();
                   
               }//if(zeile <= 5)
        
               // Funktion loescht das temporäre Eingabefeld und sprint eins nach oben
                   function delete_row()
                   {
                       document.getElementById(tr.id).parentNode.removeChild(document.getElementById(tr.id));
                       zeile--;
                       tr.id = 'a' + zeile;
                       input.name = 'eingabe' + zeile;
                       document.getElementById(input.name).focus();
                       hide_submit_button();
                       show_add_button();
                   }
        
               // Tastaturfunktionen
                   document.onkeydown = function(event)
                   {
                   // Mit 'Bild-auf' Taste nächstes Eingabefeld erzeugen
                       if (event.keyCode == 34)
                       {
                           add_input();
                       }
        
                   // Mit 'Bild-ab' Taste Zeile loeschen und in das obere Feld springen
                       if (event.keyCode == 33)
                       {
                           if(zeile > 1)
                           {
                               delete_row();
                           }
                       }
                   }
        
               // Pruefen, ob der Benutzer etwas eingegeben hat
                   var v = zeile;
                   v--;
                   input.nameprev = 'eingabe' + v;
                       
                       if (document.getElementById(input.nameprev).value == "")
                       {
                           alert("Bitte machen Sie eine Eingabe.");
                           delete_row();
                       }
       /************************************************************************************/
           $(document).ready(function() {
               var myArr = [];
           
               $.ajax({
                   url: "zeile2.xml",
                   dataType: "xml",
                   success: parseXml,
                   complete: setupAC,
                   failure: function(data) {
                       alert("XML File could not be found");
                       }
               });
           
               function parseXml(xml)
               {
                   //find every query value
                   $(xml).find("names").each(function()
                   {
                       myArr.push($(this).attr("nr"));
                   }); 
               }
               
               function setupAC() {
                   $("input#eingabe2").autocomplete({
                           source: myArr,
                           minLength: 1,
                           select: function(event, ui) {
                               $("input#eingabe2").val(ui.item.value);
                           }
                   });
               }
           });
           }//else
       }//function add_input()

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. g****e

   18:20, 18.9.2012

   Vllt auf onchange Event prüfen, ob das Feld leer ist, und sofern es Leer ist die Liste leeren? Würd ich nu mal probieren.
   
   Liebe Grüße

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?