Chức năng tìm kiếm bộ lọc sản phẩm rất phổ biến trong trang web Thương mại điện tử để cho phép tìm kiếm sản phẩm với các tùy chọn khác nhau như bộ lọc giá sản phẩm và bộ lọc tìm kiếm hộp kiểm, v.v. 'RE ở đây đúng nơi. Trong hướng dẫn này, bạn sẽ tìm hiểu cách xây dựng bộ lọc tìm kiếm sản phẩm với AJAX, PHP và MySQL. Show Ngoài ra, đọc:
Chúng tôi sẽ đề cập đến hướng dẫn này theo các bước dễ dàng để hiển thị các tùy chọn tính năng sản phẩm để tìm kiếm bộ lọc với trình trượt phạm vi giá và kết quả tìm kiếm bộ lọc hiển thị phù hợp với AJAX, PHP và MySQL.  Vì chúng tôi sẽ đề cập đến hướng dẫn này với ví dụ trực tiếp để xây dựng bộ lọc tìm kiếm sản phẩm với AJAX, PHP & MySQL, vì vậy các tệp chính cho ví dụ này đang theo sau.
Bước1: Tạo bảng cơ sở dữ liệu MySQL Trước tiên, chúng tôi sẽ tạo ra sản phẩm bảng_details để lưu trữ chi tiết sản phẩm để hiển thị theo Bộ lọc tìm kiếm. CREATE TABLE `product_details` (
`id` int(20) NOT NULL,
`name` varchar(120) NOT NULL,
`brand` varchar(100) NOT NULL,
`price` decimal(8,2) NOT NULL,
`ram` char(5) NOT NULL,
`storage` varchar(50) NOT NULL,
`camera` varchar(20) NOT NULL,
`image` varchar(100) NOT NULL,
`quantity` mediumint(5) NOT NULL,
`status` enum('0','1') NOT NULL COMMENT '0-active,1-inactive'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Chúng tôi sẽ chèn một vài bản ghi vào bảng sản phẩm_details cho ví dụ này.product_details table for this example. INSERT INTO `product_details` (`id`, `name`, `brand`, `price`, `ram`, `storage`, `camera`, `image`, `quantity`, `status`) VALUES (1, 'Honor 9 Lite (Sapphire Black, 64 GB) (4 GB RAM)', 'Honor', '14499.00', '4', '64', '13', '1.png', 10, '1'), (2, 'Infinix (Sandstone Blue, 32 GB) (3 GB RAM)', 'Infinix', '8999.00', '3', '32', '13', '2.png', 10, '1'), (3, 'VIVO V8 Youth (Black, 32 GB) (4 GB RAM)', 'VIVO', '16990.00', '4', '32', '16', '3.png', 10, '1'), (4, 'Moto (Gold, 32 GB) (3 GB RAM)', 'Moto', '11499.00', '3', '32', '8', '4.png', 10, '1'), (5, 'Lenovo (Venom Black, 32 GB) (3 GB RAM)', 'Lenevo', '8999.00', '3', '32', '13', '5.png', 10, '1'), (6, 'Samsung Galaxy (Gold, 16 GB) (3 GB RAM)', 'Samsung', '11990.00', '3', '16', '13', '6.png', 10, '1'), (7, 'Moto Plus (Pearl White, 16 GB) (2 GB RAM)', 'Moto', '8799.00', '2', '16', '8', '7.png', 10, '1'), (8, 'Panasonic (White, 16 GB) (1 GB RAM)', 'Panasonic', '6999.00', '1', '16', '8', '8.png', 10, '1'), (9, 'OPPO (Black, 64 GB) (6 GB RAM)', 'OPPO', '18990.00', '6', '64', '16', '9.png', 10, '1'), (10, 'Honor 7 (Gold, 32 GB) (3 GB RAM)', 'Honor', '9999.00', '3', '32', '13', '10.png', 10, '1'), (11, 'Asus ZenFone (Midnight Blue, 64 GB) (6 GB RAM)', 'Asus', '27999.00', '6', '128', '12', '11.png', 10, '1'), (12, 'Redmi 5A (Gold, 32 GB) (3 GB RAM)', 'MI', '5999.00', '3', '32', '13', '12.png', 10, '1'), (13, 'Intex (Black, 16 GB) (2 GB RAM)', 'Intex', '5999.00', '2', '16', '8', '13.png', 10, '1'), (14, 'Google Pixel (18:9 Display, 64 GB) White', 'Google', '62990.00', '4', '64', '12', '14.png', 10, '1'); Bước 2: Bao gồm Bootstrap, JQuery và Bootstrap Slider vì chúng tôi sẽ xử lý thiết kế với Bootstrap, vì vậy trước tiên chúng tôi sẽ bao gồm Bootstrap, JQuery và Bootstrap Slider trong tệp index.php. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/ css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/ jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/ js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/ bootstrap-slider.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/ bootstrap-slider.min.js"></script> <script src="js/search.js"></script> <link rel="stylesheet" href="css/style.css"> Bước3: Hiển thị các tùy chọn tìm kiếm bộ lọc sản phẩm hiện trong tệp index.php, chúng tôi sẽ hiển thị các tùy chọn tìm kiếm bộ lọc sản phẩm để cho phép người dùng tìm kiếm sản phẩm với bộ lọc. Chúng tôi sẽ bao gồm Class Product.php và sau đó gọi các phương thức để hiển thị các giá trị tùy chọn bộ lọc từ bảng cơ sở dữ liệu MySQL sản phẩm_details. Chúng tôi cũng sẽ tạo Slider Phạm vi Giá với Slider Bootstrap để tìm kiếm sản phẩm với phạm vi giá. <div class="container">
<?php
include 'class/Product.php';
$product = new Product();
?>
<div class="row">
<div class="col-md-3">
<div class="list-group">
<h3>Price</h3>
<div class="list-group-item">
<input id="priceSlider" data-slider-id='ex1Slider'
type="text" data-slider-min="1000" data-slider-max="65000" data-slider-step="1" data-slider-value="14"/>
<div class="priceRange">1000 - 65000</div>
<input type="hidden" id="minPrice" value="0" />
<input type="hidden" id="maxPrice" value="65000" />
</div>
</div>
<div class="list-group">
<h3>Brand</h3>
<div class="brandSection">
<?php
$brand = $product->getBrand();
foreach($brand as $brandDetails){
?>
<div class="list-group-item checkbox">
<label><input type="checkbox"
class="productDetail brand" value="<?php echo $brandDetails["brand"]; ?>" > <?php echo $brandDetails["brand"]; ?></label>
</div>
<?php } ?>
</div>
</div>
<div class="list-group">
<h3>RAM</h3>
<?php
$ram = $product->getRam();
foreach($ram as $ramDetails){
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="productDetail ram"
value="<?php echo $ramDetails['ram']; ?>" > <?php echo $ramDetails['ram']; ?> GB</label>
</div>
<?php
}
?>
</div>
<div class="list-group">
<h3>Internal Storage</h3>
<?php
$storage = $product->getStorage();
foreach($storage as $storageDetails){
?>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="productDetail storage"
value="<?php echo $storageDetails['storage']; ?>" > <?php echo $storageDetails['storage']; ?> GB</label>
</div>
<?php
}
?>
</div>
</div>
<div class="col-md-9">
<div class="row searchResult">
</div>
</div>
</div>
</div>
Chúng tôi cũng sẽ tạo Container SearchResult để hiển thị kết quả tìm kiếm bộ lọc bằng cách sử dụng JQuery Ajax.searchResult container to display filter search result using jQuery Ajax. Bước4: Thực hiện tìm kiếm bộ lọc sản phẩm Yêu cầu AJAX Trong search.js, chúng tôi sẽ xác định một chức năng WridterSearch () để thực hiện yêu cầu AJAX theo tùy chọn tìm kiếm bộ lọc Kết quả tìm kiếm. Yêu cầu AJAX được thực hiện để Action.php tải dữ liệu tìm kiếm từ bảng cơ sở dữ liệu MySQL dưới dạng phản hồi JSON. function filterSearch() {
$('.searchResult').html('<div id="loading">Loading .....</div>');
var action = 'fetch_data';
var minPrice = $('#minPrice').val();
var maxPrice = $('#maxPrice').val();
var brand = getFilterData('brand');
var ram = getFilterData('ram');
var storage = getFilterData('storage');
$.ajax({
url:"action.php",
method:"POST",
dataType: "json",
data:{action:action, minPrice: minPrice, maxPrice:maxPrice,
brand:brand, ram:ram, storage:storage},
success:function(data){
$('.searchResult').html(data.html);
}
});
}
Bước5: Gọi Phương thức tìm kiếm bộ lọc sản phẩm Trong tệp Action.php, chúng tôi sẽ bao gồm Class Product.php và phương thức gọi $ sản phẩm-> Search Products () để nhận kết quả tìm kiếm HTML và được truyền dưới dạng phản hồi JSON bằng JSON_ENCODE. <?php
include 'class/Product.php';
$product = new Product();
if(isset($_POST["action"])){
$html = $product->searchProducts($_POST);
$data = array(
"html" => $html,
);
echo json_encode($data);
}
?>
Bước6: Nhận dữ liệu tìm kiếm bộ lọc sản phẩm từ Bảng cơ sở dữ liệu MySQL trong lớp Product.php, chúng tôi xác định Phương thức Search Products () Để lấy dữ liệu tìm kiếm bộ lọc sản phẩm từ bảng cơ sở dữ liệu MySQL. Chúng tôi sẽ tạo Truy vấn chọn với các tùy chọn tìm kiếm bộ lọc và nhận dữ liệu. Sau đó tạo kết quả HTML với dữ liệu kết quả và trả về kết quả tìm kiếm hoàn chỉnh HTML. public function searchProducts(){
$sqlQuery = "SELECT * FROM ".$this->productTable." WHERE status = '1'";
if(isset($_POST["minPrice"], $_POST["maxPrice"]) &&
!empty($_POST["minPrice"]) && !empty($_POST["maxPrice"])){
$sqlQuery .= "
AND price BETWEEN '".$_POST["minPrice"]."' AND '".$_POST["maxPrice"]."'";
}
if(isset($_POST["brand"])) {
$brandFilterData = implode("','", $_POST["brand"]);
$sqlQuery .= "
AND brand IN('".$brandFilterData."')";
}
if(isset($_POST["ram"])){
$ramFilterData = implode("','", $_POST["ram"]);
$sqlQuery .= "
AND ram IN('".$ramFilterData."')";
}
if(isset($_POST["storage"])) {
$storageFilterData = implode("','", $_POST["storage"]);
$sqlQuery .= "
AND storage IN('".$storageFilterData."')";
}
$sqlQuery .= " ORDER By price";
$result = mysqli_query($this->dbConnect, $sqlQuery);
$totalResult = mysqli_num_rows($result);
$searchResultHTML = '';
if($totalResult > 0) {
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
$searchResultHTML .= '
<div class="col-sm-4 col-lg-3 col-md-3">
<div class="product">
<img src="images/'. $row['image'] .'"
alt="" class="img-responsive" >
<p align="center"><strong><a
href="#">'. $row['name'] .'</a></strong></p>
<h4 style="text-align:center;" class="text-danger"
>'. $row['price'] .'</h4>
<p>Camera : '. $row['camera'].' MP<br />
Brand : '. $row['brand'] .' <br />
RAM : '. $row['ram'] .' GB<br />
Storage : '. $row['storage'] .' GB </p>
</div>
</div>';
}
} else {
$searchResultHTML = '<h3>No product found.</h3>';
}
return $searchResultHTML;
}
Bạn cũng có thể thích:
Chuyển đổi dấu thời gian Unix sang thời gian ngày có thể đọc được trong PHP Làm thế nào để tìm kiếm sản phẩm trong PHP?PHP: Một lớp giữ các phương thức liên quan đến sản phẩm ... Bước1: Tạo bảng cơ sở dữ liệu MySQL. .... Bước 2: Hình thức thiết kế với các tùy chọn bộ lọc. .... Bước 3: Nhận tùy chọn bộ lọc sản phẩm. .... Bước4: Sản phẩm liệt kê với bộ lọc. .... Bước5: Nhận sản phẩm từ cơ sở dữ liệu MySQL .. Làm thế nào để tạo hộp tìm kiếm trong PHP và MySQL?Cài đặt cơ sở dữ liệu Mở XAMPP và bắt đầu Apache và MySQL.Nhấp vào trên New New.Tạo một cơ sở dữ liệu có tên là Tự động hoàn thành (hoặc bất cứ điều gì bạn muốn gọi nó).Sao chép và dán truy vấn sau để tạo bảng (tìm kiếm), tên cột (ID, tên), sau đó chèn dữ liệu giả.Open XAMPP and Start Apache and MySQL. Click on “New”. Create a database called “autocomplete” (or anything you would like to call it). Copy and paste the following query to create the Table (search), Column names (Id, Name), and then insert dummy data.
Làm thế nào để lọc bảng bằng AJAX trong PHP?Dữ liệu tìm kiếm và lọc (GetData ... Truy xuất tùy chọn từ khóa và sắp xếp từ yêu cầu AJAX bằng phương thức PHP $ _POST .. Nhận dữ liệu thành viên được lọc bằng hàm getrows () của lớp người dùng .. Tạo HTML của các hàng dữ liệu của thành viên .. Kết xuất hàng HTML với các bản ghi được lọc .. Làm thế nào để tìm kiếm trực tiếp trong ajax?Tìm kiếm cơ sở dữ liệu trực tiếp AJAX.. Bước 1: Tạo bảng cơ sở dữ liệu.Thực hiện truy vấn SQL sau đây để tạo bảng quốc gia trong cơ sở dữ liệu MySQL của bạn..... Bước 2: Tạo mẫu tìm kiếm..... Bước 3: Xử lý truy vấn tìm kiếm trong phụ trợ .. |
