AJAX-Suchscript: Resetet sich nach ~4sek und zeigt "alles" an

[Wuppi]

Hallo in die Runde,

ich hab 3 (4) Ajax-Suchscripte (mit dynamischer Ausgabe während des Tippens). Grob zusammengefasst:

1) Geht: Ist steinalt und ich hab hier eine Sackgasse drin - aus div. Gründen möchte ich den also ersetzen.
Bissel Javascript für das AJAX-Script. Dazu einfacher PHP-Code für Datenbank und Ausgabe über PHP (wie heißt das noch wo ich in einer Zeile "STARTHTML" (oder was auch immer - Freie Wahl) schreibe und paar Zeilen das ganze schließe). Klappt. Quelle dafür: Google
2) Problem: Mehr Javascript für Ajax. PHP-Code mit Prepared Statements für die DB - Ausgabe über echo an DIV (via JS geregelt - klar). Quelle: ChatGPT & Bing
3) Problem: PHP-Code, Prepared Statements für DB. Ausgabe über JSON an JavaScript. Das JS erstellt auch die eigentliche Ausgabe (div, p, h4). Quelle: ChatGPT & Bing
4) Klappt im Original, in meiner Kopie nicht: Die PHP-Codebasis konnte ich von der Webseite natürlich nicht kopieren. Aber CSS, Ausgabe etc. PHP ist wie bei 2). Das Original klappt (hab ich nur leider nichts von), meine Kopie nicht.

Leider hab ich für folgendes Problem keinerlei Ansatz zum Troubleshooten ....

Die Suchfunktion klappt ansich. Ich Tippe "A" und alles mit A kommt usw. Klappt recht gut und ist sogar performanter als ich dachte. ABER - laut Laufzeitanalyse wird nach ~4200-4400ms die search.php neugeladen was zur folge hat: ich bekomme ALLES angezeigt was die Datenbank hergibt (also natürlich hab ich eine Begrenzung drin.. - das ist nicht das Problem).

Ich hab es mehrfach durchgespielt - es sind immer 4200-4400ms. Ich hab die Prepared Statements mal entfernt und sah auch hier das sich script.php nach ~4400ms neu geladen hat. Natürlich hab ich schon alles geprüft ob ich reload drin habe oder so... Ist aber nicht so. Das Suchfeld wird übrigends nicht resetet. Es steht dann XYZ drin, aber mir wird ABC[...]XYZ angezeigt.

Bevor ich hier jetzt tonnenweise Code poste, würde ich erstmal abklären ob ich hier nicht vielleicht etwas grundsätzliches falsch gemacht habe. Ich habe von AJAX/JS keine Ahnung - den allerersten Code hab ich mir vor Jahren im Netz gesucht und hat auch anhieb geklappt. Der ist auch noch übersichtlich. Der Code von 2/3 ist recht umfangreich. K.a. was ich da problemlos mal rausnehmen kann bzw. umschreiben kann/darf. [PS: die Webseite ist nicht öffentlich]

Vielleicht ist es ja ein Bekanntes Problem was Leute gerne bauen, wenn sie keine Ahnung haben
Vielleicht gibt es irgendwelche Timeouts bei JS die man hier bedenken muss, die aber nicht bedacht wurden? Es hat so das gefühl das nach 4200ms das JS "" an die search.php übergibt. Aber warum macht es das? Sicherheitsfeature? Das die Datenbank bzw. das Prepared Statement geschlossen wird, hab ich schon ausschließen können. Den Code dafür rein/raus - brachte nichts.


Grüße
Wuppi

PS: ich hab noch einen "geklauten" code - also das FRONTEND (den PHP-Code dahinter musste ich natürlich mit eigenen ersetzen) - auch hier hab ich kurioserweise das gleiche Problem ... 4200ms -> reload. Die Seite wo ich den geklaut habe, klappt aber ohne Probleme. Die haben sogar 2 Suchergebnisse mit einem AJAX-Suchfeld. Also vielleicht doch irgendwas am Server in Verbindung mit JS, Prepared Statemts etc? Apache/mariaDB in aktueller Version. PHP 8.2. (PHP 8.0 das gleiche)

[Wuppi]

Hallo in die runde,

keiner einen Troubleshootingansatz?

Ich hab jetzt folgendes Rausgefunden:

Es scheint irgendeinen Eingabetimeout zu geben.
Wenn ich "STAR" eingebe (was schnell geht) - bekomme ich alles mit STAR angezeigt. Das bleibt auch so.
Wenn ich "STAR " eingebe (eigentlich nicht langsamer) - bekomme ich alles mit STAR angezeigt und nach ~4sek springt er auf alles mit " " oder % ...
Wenn ich "Raumschiff" eingebe (was eigentlich schnell geht) bekomme ich alles mit Raumschiff angezeigt ... nach ~4sek springt er auf ein Suchergebnis was NICHT " " oder % "entspricht. So recht konnt eich das noch nicht erkennen.
Wenn ich per Copy&Paste z.b. "star wars" reinhau - alles top! Kein Switch zurück. Was für mich halt so ausschaut als ob es mit der Eingabe was zu tun hat. Bin ich zu langsam wird nur das letzte übermittelt. Bei "Star " halt " " und entsprechen das Ergebnis.

Ich hätte hier mal den JS-Code - ich vermute das hier ein Problem ist.

Code: Alles auswählen

function search() {
    var searchTerm = document.getElementById('search-input').value;

    // AJAX request
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                displayResults(response);
				
// Container für Suchergebnisse anzeigen
                var searchResultsContainer = document.getElementById('search-results');
                searchResultsContainer.style.display = 'block'; // Einblenden des Containers				
				
            } else {
                console.error('Fehler bei der AJAX-Anfrage.');
            }
        }
    };

    xhr.open('POST', 'search.php');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send('searchTerm=' + searchTerm);
}

var searchInput = document.getElementById('search-input');
searchInput.addEventListener('keyup', function(event) {
    var searchTerm = event.target.value;
    
    // Überprüfe, ob das Suchfeld leer ist
    if (searchTerm === '') {
        clearSearchResults(); // Funktion aufrufen, um die Suchergebnisse zu löschen
        hideSearchResultsContainer(); // Funktion aufrufen, um den Container zu verstecken
    } else {
        search(); // Suche ausführen, wenn das Suchfeld nicht leer ist
    }
});

function clearSearchResults() {
    var searchResults = document.getElementById('search-results');
    searchResults.innerHTML = '';
}

function hideSearchResultsContainer() {
    var searchResultsContainer = document.getElementById('search-results');
    searchResultsContainer.style.display = 'none'; // Ausblenden des Containers
}

function displayResults(results) {
    var searchResults = document.getElementById('search-results');
    searchResults.innerHTML = '';

    // Anzahl der Treffer und maximale Anzahl der angezeigten Ergebnisse
    var count = results.count;
    var hits = results.hits;
    var resultCount = document.getElementById('result-count');
    resultCount.textContent =  + count + ' / ' + hits ;
	
//    var resultCount = document.createElement('p');
//    resultCount.textContent = 'Anzahl Treffer: ' + count + ' (Maximal angezeigt: ' + hits + ')';
 //   searchResults.appendChild(resultCount);

    // Suchergebnisse anzeigen
    for (var i = 0; i < results.data.length; i++) {
        var item = results.data[i];

        // Container für das Suchergebnis
        var resultContainer = document.createElement('div');
        resultContainer.className = i % 2 === 0 ? 'result-container even' : 'result-container odd';

        // Thumbnail
		if (item.thumbnail) {
			var thumbnail = document.createElement('img');
			thumbnail.className = 'thumbnail';
			thumbnail.src = item.thumbnail;
			thumbnail.style.height = item.thumbnailHeight + 'px';
			thumbnail.style.width = item.thumbnailWidth + 'px';
			
			var thumbnailContainer = document.createElement('div');
			thumbnailContainer.className = 'thumbnail-container';
			thumbnailContainer.appendChild(thumbnail);
			resultContainer.appendChild(thumbnailContainer);
		}
        // Titel
            var title = document.createElement('h4');
    		title.className = 'description';
            title.textContent = item.title;
            resultContainer.appendChild(title);

        // Beschreibung
		if (item.description) {
			var description = document.createElement('p');
			description.className = 'description';
			//description.textContent = item.description;
			description.innerHTML = item.description;
			resultContainer.appendChild(description);
		}
		
    // Klickereignis für den Container hinzufügen
    resultContainer.addEventListener('click', createClickHandler(item.imdb, item.lid));

    // Suchergebnis zum Container hinzufügen
    searchResults.appendChild(resultContainer);
    }
}

// Funktion zum Erstellen des Klickereignishandlers mit den Parametern
function createClickHandler(imdbID, lid) {
    return function(event) {
        // URL aufbauen mit den zusätzlichen Parametern
        var url = 'index.php?view=movie&imdb=' + imdbID + '&lid=' + lid;

        // URL aufrufen
        window.location.href = url;
    };
}