Create a PHP jQuery ajax and MySQLi LIKE Search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a PHP jQuery ajax and MySQLi LIKE Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".search_button").click(function() {
// getting the value that user typed
var searchString = $("#search_box").val();
// forming the queryString
var data = 'search='+ searchString;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "do_search.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#results").html('');
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div style="margin:20px auto; text-align: center;">
<form method="post" action="">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button" /><br />
</form>
</div>
<div>
<div id="searchresults">Search results :</div>
<div id="results" class="update"></div>
</div>
</div>
<style>
body{ font-family:Arial, Helvetica, sans-serif; }
#container { margin: 0 auto; width: 600px; }
#search_box {
padding:4px;
border:solid 1px #666666;
width:300px;
height:30px;
font-size:18px;-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
.search_button {
border:#000000 solid 1px;
padding: 6px;
color:#000;
font-weight:bold;
font-size:16px;-moz-border-radius: 6px;-webkit-border-radius: 6px;
}
#searchresults {
text-align:left;
margin-top:20px;
display:none;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#000;
}
#newspaper-b {
font-family: lucida sans unicode,lucida grande,Sans-Serif;
font-size: 12px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #69c;
margin: 20px;
}
.tr, tr {
border-bottom: 1px solid #ddd;
}
#newspaper-b th {
font-weight: 400;
font-size: 14px;
color: #039;
padding: 15px 10px 10px;
}
#newspaper-b tbody {
background: #e8edff;
}
#newspaper-b td {
color: #669;
border-top: 1px dashed #fff;
padding: 10px;
}
#newspaper-b tbody tr:hover td{color:#339;background:#d0dafd}
.found {
font-weight: bold;
font-style: italic;
color: #ff0000;
}
</style>
</body>
</html>
//do_search.php
<table id="newspaper-b">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Category</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
</tr>
</thead>
<tbody>
<?php
include("dbcon.php");
//if we got something through $_POST
if (isset($_POST['search'])) {
// never trust what user wrote! We must ALWAYS sanitize user input
$word = mysql_real_escape_string($_POST['search']);
$word = htmlentities($word);
// build your search query to the database
$sql = "SELECT * FROM product WHERE name LIKE '%" . $word . "%' ORDER BY pid LIMIT 10";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$end_result = '';
while($row = mysqli_fetch_assoc($result)) {
$rs_name = $row["name"];
$category = $row["category"];
$price = $row["price"];
$discount = $row["discount"];
$bold = '<span class="found">' . $word . '</span>';
$end_result .= '<tr><td>'. str_ireplace($word, $bold, $rs_name).'</td><td>'.$category.'</td><td>'.$price.'</td><td>'.$discount.'</td></tr>';
}
echo $end_result;
}else {
echo "0 results";
}
}
?>
</tbody>
</table>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
VIDEO
