Der letzte Schritt unseres kleinen Projekts besteht darin, dass wir dafür sorgen müssen, dass die Suchvorschläge auch wieder ausgeblendet werden – und zwar immer dann, wenn das Eingabefeld nicht mehr den Eingabefokus besitzt.

Auch hier setzen wir wie im zweiten Teil wieder einen Timer ein, der dann so ausschaut:

function hideQuerys()
{
//in 0,3 Sek. geht's los
window.clearTimeout(timer);
timer = window.setTimeout('hideQuerys2()',300);
}
function hideQuerys2()
{
//ausblenden
document.getElementById('trefferliste').style.display =
'none';
}

Und zum Überblick noch mal der komplette Code zusammengesetzt:

Suche

Im Browser sieht das dann z. B. so aus: Dieser Text ist dem Buch “JavaScript und Ajax” entnommen, das im Franzis-Verlag erschienen ist. Das Buch ist hier direkt bestellbar.