I got the plugin from the net and made some required changes. But I think PHP is not responding.
exp1.html code
<html>
<head>
<meta charset="UTF-8">
<title>AutoSuggestion using Ajax, Jquery and PHP</title>
<link rel="stylesheet" href="exp1.css">
</head>
<body>
<div class="serch-wrap">
<div class="form-wrapper cf">
<input type="text" class="abhijitscript" name="search_word">
<input type="submit" value="Search">
</div>
<div class="autodropdown">
<ul class="suggestresult"></ul>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="exp1.js"></script>
</html>
exp1.php
<?php
$host="localhost";
$user="root";
$password="jatin";
$link=mysqli_connect($host,$user,$password);
if(@mysqli_select_db($link,'books')){
// echo "Database connected..<br>";
}
else
echo mysqli_connect_error();
if(isset($_POST['name']))
{
$name = mysqli_real_escape_string($link,trim($_POST['name']));
$sql = "SELECT `name` FROM `books` WHERE `name` LIKE 'l%'";
$myquery = mysqli_query($link,$sql) or die(mysql_error());
if(mysqli_num_rows($myquery) !=0)
{
while(($row = mysqli_fetch_array($myquery)) !== false)
{
echo '<li>'.$row['name'].'</li>';
}
}
else
{
echo '<li>Not Found</li>';
}
} else{
echo "not set!";
}
?>
exp1.js
$(document).ready(function(){
$('.abhijitscript').keyup(function(){
var query_string = $(this).val();
$.ajax({
type: "POST",
url: "exp1.php",
data: { name:query_string },
success: function(data)
{ console.log(data);
$('.suggestresult').html(data);
$('.suggestresult li').click(function(){
var return_value = $(this).text();
$('.abhijitscript').attr('value', return_value);
$('.abhijitscript').val(return_value);
$('.suggestresult').html('');
});
}
});
});
});
Console also not showing any error, which points to some mistake in php code. I have provided complete code. Thank you!