Full Code

<h1>Template:SearchSuggestion</h1>
<input type="text" id="search-input">


<div id="search-suggest">
	<a href="#" class="close">x</a>
	<div class="search-pages">
		<strong>pages</strong>
	</div>
	<div class="search-files">
		<strong>files</strong>
	</div>
	<div class="search-comments">
		<strong>comments</strong>
	</div>
</div>



<div>
<style>
#search-suggest strong{
	margin:0 0 10px 0;
	color:#999;
	display:block;
}
#search-suggest {
	border:1px solid #ccc;
	display:none;
	padding:0;
	position:absolute;
	overflow:hidden;
	background:#fff;
	font-size:11px;
	min-width:150px;
	z-index:50;
}
#search-suggest .search-pages{
	float:left;
	padding:5px 20px;
	max-width:300px;
}
#search-suggest .search-files{
	float:left;
	padding:5px 20px;
	max-width:200px;
}
#search-suggest .search-comments{
	float:left;
	padding:5px 20px;
	max-width:200px;
}
#search-suggest a {
	display:block;
	padding:0 0 0 20px;
	height:16px;
	overflow:hidden;
	margin:0 0 10px 0;
	background-image:url(/skins/common/icons/icons.gif);
	background-repeat:no-repeat;
}
#search-suggest .search-pages a {
	background-position:0 -768px;
	margin:0;
	
}
#search-suggest .search-files a {
	background-position:0 -1040px;
}
#search-suggest .search-comments .comment-user {
	display:block;
	font-weight:bold;
	margin-bottom:0px;
	padding:0;
}
#search-suggest .search-comments .comment-text {
	display:block;
	font-weight:100;
	margin-bottom:10px;
	color:#999;
}
#search-suggest .search-pages .page-path {
	display:block;
	color:#999;
	font-size:9px;
	margin:0 0 10px 0;
}
.no-show {
	display:none;
}
#search-suggest a.close{
	float:right;
	display:block;
	font-size:14px;
	width:15px;
	padding:0 0 1px 0;
	line-height:1;
	-moz-border-radius:7px;
	border:2px solid #fff;
	font-weight:bold;
	text-align:center;
	background:#ccc;
	color:#fff;
	text-decoration:none;
}
#search-suggest .close:hover{
	background:#9f1313;
	text-decoration:none;
	color:#fff;
}
</style>
</div>
<script type="text/javascript">
	$("body").ready( function() {
		$("#search-suggest a.close").click( function() {
			$("#search-suggest").hide();
			return false;
		});
	
		$("#search-input").keyup( function() {
			if ($(this).val()==''){
				$("#search-suggest").hide();
				return false;
			}
	
			var q = $(this).val();
			
			clearTimeout($.data(this, "timer"));
		    var ms = 400; //milliseconds
		    var wait = setTimeout(function() {
		      loadsearch(q);
		    }, ms);
	    
	
			$.data(this, "timer", wait);
		});
	});
	
function loadsearch(q) {
	var qurl="http://developer.mindtouch.com/@api/deki/site/search?limit=10&q="+q;
	var cntpage=0;
	var cntfile=0;
	var cntcomments=0;
	jQuery.get(qurl, function(xml) {
		$("#search-suggest .search-pages a").remove();
		$("#search-suggest .search-pages span").remove();
		$("#search-suggest .search-files a").remove();
		$("#search-suggest .search-comments a").remove();
		$("#search-suggest .search-comments span").remove();
	
		$(xml).find('search > page').each(function(){
			var qpath = $(this).find(" > path").text();
			var qtitle = $(this).find("> title").text();
		$("#search-suggest .search-pages ").append('<a class="page" href="/' + qpath + '">' + qtitle.substr(0,30) + '</a><span class="page-path">' + qpath + '</span>');
			cntpage++;
		});
		
		$(xml).find('search > file').each(function(){
			var quri = $(this).find(" > contents").attr("href");
			var qtitle = $(this).find(" > filename").text();
			$("#search-suggest .search-files").append('<a class="file" href="' + quri + '">' + qtitle + '</a>');
			cntfile++;
		});
		
		$(xml).find('search > comment').each(function(){
			var quser = $(this).find("username").text();
			var qcomment = $(this).find(" > content").text();
			var quri = $(this).find("path").text();
			$("#search-suggest .search-comments").append('<a href="/' + quri + '" class="comment-user">' + quser + '</a><span class="comment-text">' + qcomment.substr(0,40) + '...</span>');
			cntcomments++;
		});
		
		if(cntpage>0){
			$("#search-suggest .search-pages").show();
		}else {
			$("#search-suggest .search-pages").hide();
		}
		
		if(cntfile>0){
			$("#search-suggest .search-files").show();
		}else {
			$("#search-suggest .search-files").hide();
		}
		
		if(cntcomments>0){
			$("#search-suggest .search-comments").show();
		}else {
			$("#search-suggest .search-comments").hide();
		}
		
		if(cntpage>0 || cntfile>0 || cntcomments>0){
			$("#search-suggest").show();
		}else {
			$("#search-suggest").hide();
		}
	});
}
</script>