kostenloser Webspace werbefrei: lima-city


Löschen von Input-Felder und autocomplete

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    schmevin

    schmevin hat kostenlosen Webspace.

    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

    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?

Über lima-city

Login zum Webhosting ohne Werbung!