Example 1:
Syntax: How to take input from input box to jquey
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2>Search Our Database</h2>
<input class='form-control' type="text" name = 'search' id = 'search' placeholder='Search our inventory'>
<br>
<br>
<h2 class="bg-success" id="result"> </h2>
</div>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
var search = $('#search').val();
alert(search);
});
});
</script>
</body>
</html>
]]>
Example 2:
Syntax: HTML and Ajax Code: index.php
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2>Search Our Database</h2>
<input class='form-control' type="text" name = 'search' id = 'search' placeholder='Search our inventory'>
<br>
<br>
<h2 class="bg-success" id="result">hfgh </h2>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
var search = $('#search').val();
// alert(search);
$.ajax({
url: 'search.php',
data: {search: search},
type: 'POST',
success: function(data){
if(!data.error){
$('#result').html(data);
}
}
});
});
});
</script>
]]>
Syntax: PHP Code search.php
<![CDATA[
<?php
$search = $_POST['search'];
echo $search ;
?>
]]>
Example 3: Search from database
Table:
Syntax: It contains HTML and Ajax code index.html
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2>Search in Database</h2>
<input class='form-control' type="text" name = 'search' id = 'search' placeholder='Search our inventory'>
<br>
<br>
<div id="result"> </div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
var search = $('#search').val();
// alert(search);
$.ajax({
url: 'search.php',
data: {search: search},
type: 'POST',
success: function(data){
if(!data.error){
$('#result').html(data);
}
}
});
});
});
</script>
]]>
Syntax: PHP code search.php
<![CDATA[
<?php
$connection = mysqli_connect('localhost', 'root', '','atnyla');
$search = $_POST['search'];
if(!empty($search)) {
$query = "SELECT * FROM usr WHERE name LIKE '$search%' ";
$search_query = mysqli_query($connection,$query);
$count = mysqli_num_rows($search_query);
if(!$search_query) {
die('QUERY FAILED' . mysqli_error($connection));
}
if($count <= 0) {
echo "Sorry we don't have that car available";
} else {
while($row = mysqli_fetch_array($search_query)) {
$name = $row['name'];
?>
<ul class='list-unstyled'>
<?php
echo "<li>{$name} - present in database</li>";
?>
</ul>
<?php }
}
}
?>
]]>
