Real time instant search

instant-search.html

<style>
.loc {
	color:gray;
	font-style:italic;
	font-size:11px;
}
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    // put all your jQuery goodness in here.
   
    $('#searchbox').bind('keyup', function(e){
      if($("#token").val().length > 0) {
      	getresults($('<div/>').text($("#token").val()).html());
      }
    });
});


function getresults(token){
	var finalhtml="";
	$.getJSON("http://10.10.10.12:8983/solr/db/select?rows=100&fl=companyname,id,city,state,score&wt=json&json.wrf=?&indent=true&q=" + token, function(result){
	for (var i = 0; i < result.response.docs.length; i++) {
		var thisResult = "<b>" + result.response.docs[i].companyname + "</b>"
		+ "<span class=\"loc\">&nbsp;(" 
		+ result.response.docs[i].city + ",&nbsp;" 
		+ result.response.docs[i].state + ")</span>"
		+ "<br>" + result.response.docs[i].id
		+ "<br>";
		finalhtml += thisResult;
	}
	$('#rs').html(finalhtml);
	});
	
}


</script>
<div id="searchbox">
	<input type="text" id="token"></input>
</div>
<div id="rs">Nothing to search.....</div>