JavaScript jQuery Kunden Live Suche im Firefox OK, im Chrome geht's nicht

[du-doch-nicht]

Hallo, ich habe in unserer Firma eine interne Kunden- und Druckverwaltung aufgebaut. Wenn ich ein Druckauftrag erstelle, muss ich im Formular als erstes den Kunden per Live-Suche in einem Input-Feld eingeben. Ab 4 Zeichen werden die Suchergebnisse aus der Datenbank in einer ul-Liste ausgegeben, das funktioniert soweit identisch.

Eine Auswahl an Kunden wird aufgelistet und durch das draufklicken beim gesuchten Kunden, soll 1. der 'Name' und 2. die 'ID' jeweils in ein vorhandenes Input-Feld übernommen werden. Das habe ich mittels jQuery gelöst. Hier musste ich feststellen, das Firefox (v81..) und Chrome (v86...) mein jQuery-Code unterschiedlich interpretiert. Im Firefox werden die Daten in die jeweils dafür vorgesehenen Input-Felder übernommen und im Chrome passiert einfach nichts. In der Entwicklerkonsole werden auch keine Fehler ausgegeben.

Ich muss auch dazu sagen, das ich mit jQuery noch sehr wenig Erfahrung habe und ich einfach nicht mehr weiter weiß woran es liegt. Hier konnte mir die Suchmaschine auch nicht wirklich weiterhelfen, ein paar Ansätze konnte ich finden aber irgendwie scheiterte es immer wieder.

Im Template steht die jQuery-Datei (jquery-3.5.1.min.js) am Ende vor </body> und </html>.

formular.html

<form action="formular.html" method="post">
        <table>
        <tr>
            <td width="25%"><strong>Suchen :</strong></td>
            <td width="75%">
                <input type="text" name="suchen" id="LiveSearch" size="50" value="" autocomplete="off" placeholder="ab den 4ten Zeichen suche in Datenbank..." />
                <ul id="ResultList"></ul>
            </td>
        </tr>
        <tr>
            <td><strong>Kunde :</strong></td>
            <td>
                <input type="text" name="kd_name" id="KundenName" size="50" value="" />
                &ensp;<input type="text" name="kd_id" id="KundenId" size="4" value="" readonly />
            </td>
        </tr>
        </table>
        <input type="submit" value="Speichern" />
</form>

jQuery Script

$(document).ready(function()
{
    $('#LiveSearch').on('click', function() 
    {
        if ( $(this).val().length >= 3 )
        {
            $('#ResultList').slideDown(200);
        }

    }).on('keyup', function()
    {
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings('#ResultList');

        if ( $(this).val().length > 3 )
        {
            resultDropdown.slideDown(200);
        }
        else
        {
            resultDropdown.slideUp(200);
        }

        $.get('/v4/assets/system/search.php',
        {
            search: inputVal
        })
        .done(function(data)
        {
            resultDropdown.html(data);
        });

    })
    .on('blur', function()
    {
        $('#ResultList').slideUp(200);
    });

    $(document).on('click', '#ResultList li', function(event)
    {
        event.preventDefault();
        $('#KundenName').val($(this).data('name'));
        $('#KundenId').val($(this).data('id'));
        $('#ResultList').slideUp(200);
    });

});

search.php (Hier wird nur die Ausgabe angezeigt, was die search.php zurück gibt)

<li data-id="45" data-name="Kunde 1">Kunde 1</li>
<li data-id="67" data-name="Kunde 2">Kunde 2</li>
<li data-id="3" data-name="Kunde 3">Kunde 3</li>
<li data-id="103" data-name="Kunde 4">Kunde 4</li>

 

[floq0r]

Wir mal einen Blick in die JS-Konsole im Inspektor (Öffnen über STRG+SHIFT+I).
Vielleicht gibt es Probleme beim Zugriff auf das Dataset, ich kann mich dunkel erinnern, dass Data-Felder, die als Attribut im Tag übergeben werden nicht automatisch im Dataset-Object der Node landen und nicht über .data() abgefragt werden können. Probier es stattdessen mit $('#KundenName').val($(this).attr('data-name'));

 

[du-doch-nicht]

Hallo floq0r,
ich habe es auf $('#KundenName').val($(this).attr('data-name')); abgeändert und im Chrome werden jetzt beim anklicken die Werte komischerweise nur sporadisch übernommen 🤨.
In der Chrome-Konsole wird kein Fehler hinterlegt.

 

[Lawnmower]

Mal doch mal beim click ein console.log($(this)) rein - dann siehst Du ob alle nötigen Infos grundsätzlich mal mitkommen.

 

[Ciraxis]

https://developers.google.com/web/tools/chrome-devtools/javascript ;-)

 

[du-doch-nicht]

Das mit dem 'console.log()' war sehr hilfreich, konnte damit feststellen was er eigentlich macht.
Nach jeder Aktion habe ich ein Log produziert.
Schlußendlich war '$(document).on('click', '#ResultList li', function(event)' im ersten POST die Ursache, habe es abgeändert und vor dem 'click' ein 'mousedown' eingefügt.

    $('#LiveSearch').on('click', function() 
    {
        if ( $(this).val().length >= 3 )
        {
            $('#ResultList').slideDown(200);
        }
                                            console.log('click #LiveSearch');

    }).on('keyup', function()
    {
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings('#ResultList');

        if ( $(this).val().length > 3 )
        {
                                            console.log('keyup #ResultList slideDown');
            resultDropdown.slideDown(200);
        }
        else
        {
                                            console.log('keyup #ResultList slideUp');
            resultDropdown.slideUp(200);
        }

        $.get('/v4/assets/system/search.php',
        {
            search: inputVal
        })
        .done(function(data)
        {
            resultDropdown.html(data);
        });

    })
    .on('blur', function()
    {
                                            console.log('click #LiveSearch blur');
        $('#ResultList').slideUp(200);
    });

    $(document).on('mousedown', '#ResultList li', function(event)
    {
                                            console.log('mousedown #ResultList li');
        event.preventDefault();
         $('#KundenName').val($(this).attr('data-name'));
        $('#KundenId').val($(this).attr('data-id'));
    })
    .on('click', '#ResultList li', function()
    {
                                            console.log('click #ResultList li slideup');
        $('#ResultList').slideUp(200);
    });

 

[floq0r]

Sonderbar... Hast du im debug erkennen können, dass der Click-Handler manchmal nicht feuert?