I have the following code and I do not know how to make it search without needing to give submit, can someone help me?
HTML
<html>
<head>
<title>Data Searching Without Page Refresh</title>
</head>
<body>
<!--
we will preload the loader image
to show it instantly on search
-->
<div style='display:none;'>
<img src="images/ajax-loader.gif" />
</div>
<form name = "form">
<div>Enter name then click the Search Button or just press Enter</div>
<!-- where our search value will be entered -->
<input type="text" name="name" id="fn" />
<!-- This button will call our JavaScript Search functions -->
<input type="submit" value="Search" id="search-btn" />
</form>
<div id = "s-results">
<!-- This is where our search results will be displayed -->
</div>
<!-- import jQuery file -->
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type = "text/javascript">
$(document).ready(function(){
//load the current contents of search result
//which is "Please enter a name!"
$('#s-results').load('search_results.php').show();
$('#search-btn').click(function(){
showValues();
});
$(function() {
$('form').bind('submit',function(){
showValues();
return false;
});
});
function showValues() {
//loader will be show until result from
//search_results.php is shown
$('#s-results').html('<p><img src="images/ajax-loader.gif" /></p>');
//this will pass the form input
$.post('search_results.php', { name: form.name.value },
//then print the result
function(result){
$('#s-results').html(result).show();
});
}
});
</script>
</body>
</html>
PHP FILE
<?php
include_once("config_open_db.php");
//define index
isset( $_REQUEST['name'] ) ? $name=$_REQUEST['name'] : $name='';
// just to escape undesirable characters
$name = mysql_real_escape_string( $name );
if( empty( $name )){
// this will be displayed if search value is blank
echo "Please enter a name!";
}else{
// this part will perform our database query
$sql = "select * from TBL where COLUMN like '%$name%'";
$rs = mysql_query( $sql ) or die('Database Error: ' . mysql_error());
$num = mysql_num_rows( $rs );
if($num >= 1 ){
// this will display how many records found
// and also the actual record
echo "<div style='margin: 0 0 10px 0; font-weight: bold;'>$num record(s) found!</div>";
while($row = mysql_fetch_array( $rs )){
echo "<div>" . $row['firstname'] . " " . $row['lastname'] ."</div>";
}
}else{
// if no records found
echo "<b>Name not found!</b>";
}
}
?>