Ajax Simple Auto Suggest - Jquery

So you want to make an auto suggest  and you don’t want to use a jquery plug in that is fine
here is an example of how to do it  with Jquery .load() !

You need 2 files for testing :

1) index.html , or index.php – front end
2) return.php  - returned results

3) Loader Gif ()

Code for  your front end file:

<html>
<head>
	<title>Ajax Test</title>
	<script src="jquery.min.js"></script>

<style type="text/css">

#lodespot{
	background: none repeat scroll 0 0 #fff;
    border: 1px solid;
    min-height: 10px;
    padding: 10px;
    position: absolute;
    z-index: 5;
    display: none;

}

#lodespot #closeme{
 background: none repeat scroll 0 0 #000;
    border: 1px solid;
    border-radius: 8px;
    float: right;
    font-size: 8px;
    height: 11px;
    padding: 2px;
    color: #fff;
    margin-left: 88px;

}
</style>

</head>
<body>
<br/>

<script>

$(document).ready(function(){
	// code starts 

$.ajaxSetup ({
		cache: false
});


$('#parent').keyup(function(){
var thestring = $('#parent').val(); 
var ajax_load_img = "<img src='ajax-loader.gif' alt='loading...' />";

 // string to array for spaces seems to break ?
var myArray = thestring.split(' ');
var loadUrl = "return.php?st="+myArray;


if(thestring.length > 2 ){
$("#lodespot").html(ajax_load_img).load(loadUrl);
$('#lodespot').show();
}

}); // end keyup function 

// use returned ajex values 

$('#lodespot').on("click", ".childelle", function() { 
	var chvalue = $(this).html();
	//alert(chvalue);
	$('#parent').val(chvalue);
// hide the box 
	$('#lodespot').html();
	$('#lodespot').hide();
});

// close based on returned ellement 
$('#lodespot').on("click", "#closeme", function() {
	$('#lodespot').html();
$	('#lodespot').hide();
});

$('#parent').blur(function(){
$('#lodespot').html();
$('#lodespot').hide();
});

// end ready }); </script> <h2>Start typing ...</h2> <input id="parent" name="name" autocomplete="off"> <button>GO !!</button> <div id='lodespot'></div> <div id="othercontent"> Hello this is some other content Hello this is some other content Hello this is some other content </div> </body> </html>



Code for return.php  
Note:  this does not show you how to fetch the results from a database or xml
but it does show you that you can re use /  click on the returned elements.

<div id="closeme">X</div>

<!-- Get thae data from a database 
or xml or what ever you want:-->


<span class="childelle">cow</span><br/>
<span class="childelle">sheep</span><br/>

<?php if(isset($_GET['st'])){
echo '<span class="childelle">'.$_GET['st'].'</span>';
$instring = $_GET['st']; 
$out =  str_replace(","," ", $instring);
echo '<br/>
<span class="childelle">'.$out.'</span>';
}
?>


and you are good.