Filter or Search Record with range Slider using jQuery AJAX with PHP MySQL
In this post, we have a cover topic such as How to Create a Slider for Jquery Ajax Price Range Using PHP Using MySQL. It is helpful for the user to filter data or items based on the value generated when the drag area slider appears in the products and not the rate type. In the current scenario, this is the most common function on e-commerce websites to display products or sell products online. The Jquery UI Range slider is very useful for adding quality filters to our data or list items. The JQuery UI Range slider is mainly helpful in finding items or data by price range. The price range slider allows you to filter the list of data by dragging a price range as an alternative to entering a physical price.
In this blog we developed a price range slider using jQuery UI and then added a filter function to the item list or data list using PHP and MySQL. Price range filters are a mandatory feature of any item or product list, and this range slider is the ideal choice for price filters. So here we are looking at how we can use the jQuery user interface with PHP to insert a simple slider for price range into the item list from the product list and then filter the products by price range with Ajax JQuery with PHP and MySQL.
This three step to implement Range Slider Filter
1. Create database connection
2. Create Search record with range slider Filter
3. Create PHP Code for range slider Filter
1. Create database connection
We first need to create a database connection file called dbConfig.php to fetch data from products table.
dbConfig.php
<?php
// Database configuration
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "database";
// Create database connection
$conn = mysqli_connect($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}?>
Create table in Database
--
-- Database: `database`-- Table structure for table `products`
--CREATE TABLE `products` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`price` int(11) NOT NULL,
`product_code` varchar(50) NOT NULL,
`description` text NOT NULL,
`qty` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;--
-- Dumping data for table `products`
--INSERT INTO `products` (`id`, `name`, `price`, `product_code`, `description`, `qty`) VALUES
(1, 'Samsung Galaxy', 16900, 'SAMSUNGGAL12', 'Samsung Galaxy M31 Prime Edition (Space Black, 6GB RAM, 128GB Storage) - Get Rs 2,000 Amazon Pay cashback on prepaid orders. Limited Period offer', 1),
(2, 'New Apple iPhone 11', 55999, 'APPLEIPHONE11', 'New Apple iPhone 11 (64GB) - (Product) RED\r\n', 1),
(3, 'Samsung Galaxy', 18900, 'SAMSUNGGAL12', 'Samsung Galaxy M31 Prime Edition (Space Black, 6GB RAM, 128GB Storage) - Get Rs 2,000 Amazon Pay cashback on prepaid orders. Limited Period offer', 1),
(4, 'New Apple iPhone 11 X', 65000, 'APPLEIPHONE11', 'New Apple iPhone 11 (64GB) - (Product) RED\r\n', 1),
(5, 'Vivo Y22i', 12490, 'VIVOY20', 'Vivo Y20i (Dawn White, 3GB RAM, 64GB Storage) with No Cost EMI/Additiona', 1),
(6, 'boAt Airdopes 441 TWS Ear-Buds', 1700, 'boAtAirdopes441', 'boAt Airdopes 441 TWS Ear-Buds with IWP Technology, Immersive Audio, Up to 30H Total Playback, IPX7 Water Resistance, Super Touch Controls, Secure Sports Fit & Type-C Port(Sporty Blue)', 5),
(7, 'Vivo Y20i', 21900, 'VIVOY20', 'Vivo Y20i (Dawn White, 3GB RAM, 64GB Storage) with No Cost EMI/Additiona', 1),
(8, 'boAt Airdopes 551 TWS Ear-Buds', 2499, 'boAtAirdopes441', 'boAt Airdopes 441 TWS Ear-Buds with IWP Technology, Immersive Audio, Up to 30H Total Playback, IPX7 Water Resistance, Super Touch Controls, Secure Sports Fit & Type-C Port(Sporty Blue)', 5);
2.Create Search record with range slider Filter
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filter or Search Record with range Slider using jQuery AJAX with PHP Mysql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style type="text/css">
.ui-widget-header{
background: #6734eb;
}
.ui-state-default{
background: #667561;
}
.table th {
text-align: center;
}
</style>
<div class="card text-center" style="padding:20px;">
<h3>Filter or Search Record with range Slider using jQuery AJAX with PHP Mysql</h3>
</div><br>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<p>
<label for="amount">Product Price Filter:</label>
<span id="amount" style="border:0; color:#00008B; font-weight:bold;"></span>
</p>
<div id="slider-range"></div><br> <table class="table table-striped" id="tableData">
<thead>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Price</th>
<th>Product code</th>
<th>Quantity</th>
<th>Description</th>
</tr>
</thead>
<tbody> </tbody>
</table>
</div>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html><script type="text/javascript">
$(document).ready(function(){ var v1 = 1000;
var v2 = 30000; $("#slider-range").slider({
range: true,
min: 1500,
max: 70000,
values: [v1, v2],
slide: function(event, ui) {
$("#amount").html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
v1 = ui.values[ 0 ];
v2 = ui.values[ 1 ];
loadRecords(v1, v2);
}
}); $("#amount").html("$" + $("#slider-range" ).slider( "values", 0 ) + " - $" + $("#slider-range").slider("values", 1)); function loadRecords(range1, range2){
$.ajax({
url : "action.php",
type: "POST",
data : {minAge : range1, maxAge : range2},
cache:false,
success:function(result){
$("#tableData tbody").html(result);
}
});
}
loadRecords(v1, v2);
});
</script>
3. Create PHP Code for range slider Filter
action.php
<?php
// Include database connectivity
include_once('dbConfig.php'); if (isset($_POST['minAge']) && isset($_POST['maxAge'])) { $minAge = $_POST['minAge'];
$maxAge = $_POST['maxAge'];
$query = "SELECT * FROM products WHERE price BETWEEN {$minAge} AND {$maxAge}";
}
else{
$minAge = "";
$maxAge = "";
$query = "SELECT * FROM products ORDER BY id ASC";
} $results = mysqli_query($conn, $query);
if (mysqli_num_rows($results) > 0) { $output = "";
while($row = mysqli_fetch_array($results)){ $output.="<tr align='text-center'>
<td>{$row["id"]}</td>
<td>{$row["name"]}</td>
<td>{$row["price"]}</td>
<td>{$row["product_code"]}</td>
<td>{$row["qty"]}</td>
<td>{$row["description"]}</td>
</tr>";
} echo $output; }else{
echo "<h3>No record found</h3>";
}
?>
Filter or Search Record with range Slider using jQuery AJAX with PHP MySQL
Originally published at https://www.webscodex.com on November 13, 2020.