Suchvorschläge bei der Eingabe eines Keywords ausgeben

[DiDiJo]

Hi Leute,

ich habe ein Suchformular gebaut indem ich einen Ort und Keywords eingeben kann. Bei der Orts-Eingabe durchsuche ich bei jedem Tastendruck eine GEO-Datenbank um dem User die Orte zu zeigen, die er eingeben kann oder der User kann direkt auf den Ort klicken und der entsprechende Wert wird dann in den eigentliche Formularfeld geschrieben. Ähnlich wie bei google. Man gibt was ein ... bekommt schon einige Vorschläge die andere Leute gesucht haben.

Soweit habe ich das auch alles alleine hinbekommen. Allerdings wird die Seite sehr langsam, nachdem man sich die Ergebnisse anzeigen lässt, da bei einer Eingabe von "Neust" (für Neustadt) 5 mal die GEO-DB durchsucht wird ... und die hat knapp 400.000 Zeilen.

Wie kann ich mein JS umschreiben, dass das Suchscript erst gestartet wird, wenn 500ms keine Eingabe mehr stattgefunden hat.

Das ist mein Aktueller Code ... Im Grunde genommen müsste ich nur was vor dem Ajax-Aufruf machen ... aber was ?!

function searchOrte(input,element) {
	$.ajax({
		type: "GET",
		url: "/js/ajax/ajax.fc.php",
		data: "action=inputOrt&ort="+input.value,
		success: function(text){
			$('#'+element+' .resultshere').html(text);
			$('#'+element).fadeIn('fast');
		}
	});
}

 

[CPoly]

Ich nehme an, du machst das ganze bei keyup oder ähnlichem? Dann starte dort einfach einen Timer.
Zusätzlich solltest du noch den vorherigen Request abbrechen, sofern noch einer läuft.
Hier mal ungetestet, beispielhaft:

$(document).ready(function(){
	function searchOrte(input,element) {
		return $.ajax({
			type: "GET",
			url: "/js/ajax/ajax.fc.php",
			data: "action=inputOrt&ort="+input.value,
			success: function(text){
				$('#'+element+' .resultshere').html(text);
				$('#'+element).fadeIn('fast');
			}
		});
	}
	
	var timer = null, xhr = false;
	
	$('input').keyup(function() {
		window.clearTimeout(timer);

		timer = window.setTimeout(function() {
			if(xhr)
				xhr.abort();

			xhr = searchOrte(this.value, 'foobar');
		}, 500);
	});
});

 

[DiDiJo]

wunderbar .... ich werde das gleich mal ausprobieren