Ajax Live Suche

Servus,

ich würde das so regeln:
HTML:
<input type="text" id="tbLiveSearch" onkeydown="clearSearchTimeout()" onkeyup="startSearchTimeout(this)">

<script type="text/javascript">
var searchTimeout;
var minSearchStringLength = 5;

function clearSearchTimeout() {
   window.clearTimeout(searchTimeout);
}

function startSearchTimeout(ctrl) {
   if (ctrl.value.length > minSearchStringLength = 0)
      searchTimeout = window.setTimeout("AJAXSearch()", 500);
}

function AJAXSearch() {
   ...
}
</script>

Dieser Code (hab ihn nicht getestet, muss also nicht frei von Fehlern sein) startet, sobald eine gewisse Länge des Eingabe-Strings erreicht ist, einen Timeout von einer halben Sekunde (500ms). Dieser wird gelöscht, sobald erneut eine Taste gedrückt wird.

Perfomancetechnisch ist das meiner Meinung nach so recht sinnvoll.
 
Es wäre gut zu prüfen, ob sich die Suchanfrage überhaupt ändert. Denn auch das Drücken von Nichtzeichen-Tasten wie der Eingabe-, Rückschritt- oder Umschalttaste würden sonst auch durchgehen.
Daher mein Vorschlag:
Code:
<input type="text" id="liveSearch" onkeyup="setSearchTimeout()">

<script type="text/javascript">
var searchTimeout;
var lastQuery;
var minSearchStringLength = 5;

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g, "");
};

function setSearchTimeout() {
	window.clearTimeout(searchTimeout);
	searchTimeout = window.setTimeout("AJAXSearch(document.getElementById('liveSearch').value)", 500);
}

function AJAXSearch( q ) {
	var q = q.trim();  // entfernt irrelevante Leerzeichen am Anfang und Ende
	if( q.length >= minSearchStringLength && lastQuery != q ) {
		alert('Suche: "'+q+'"');
	}	
	lastQuery = q;
}
</script>
 
Danke für eure Hilfe! Ich habe es mal als Erledigt markiert, da ich im Moment nicht dazu komme es zu testen, falls noch Fragen sind melde ich mich halt noch mal... danke.
 

Neue Beiträge

Zurück