bootstrap-select plugin https://developer.snapappointments.com/bootstrap-select/
--
-- Table structure for table `carbrands`
--
CREATE TABLE `carbrands` (
`brand_id` int(11) NOT NULL,
`brand_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `carbrands`
--
INSERT INTO `carbrands` (`brand_id`, `brand_name`) VALUES
(1, 'Toyota'),
(2, 'Honda'),
(3, 'Suzuki'),
(4, 'Mitsubishi'),
(5, 'Hyundai');
--
-- Table structure for table `carmodels`
--
CREATE TABLE `carmodels` (
`model_id` int(11) NOT NULL,
`brand_id` int(11) NOT NULL,
`car_models` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `carmodels`
--
INSERT INTO `carmodels` (`model_id`, `brand_id`, `car_models`) VALUES
(1, 1, 'Toyota Corolla'),
(2, 2, 'Toyota Camry'),
(3, 1, 'Toyota Yaris'),
(4, 1, 'Toyota Sienna'),
(5, 1, 'Toyota RAV4'),
(6, 1, 'Toyota Highlander'),
(7, 2, 'Honda HR-V'),
(8, 2, 'Honda Odyssey'),
(9, 3, 'Swift'),
(10, 3, 'Celerio'),
(11, 3, 'Ertiga'),
(12, 3, 'Vitara'),
(13, 4, 'Mirage'),
(14, 4, 'Mirage G4'),
(15, 4, 'Xpander Cross'),
(16, 4, 'Montero Sport'),
(17, 4, 'Strada Athlete'),
(18, 5, 'Reina '),
(19, 5, 'Accent'),
(20, 5, 'Elantra'),
(21, 5, 'Tucson');
//searchbox_depdendet_dropdown.php
<!DOCTYPE html>
<html>
<head>
<title>Dependent Dropdown with Search Box using jQuery, Ajax, and PHP mysqli</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
</head>
<body>
<div class="container">
<h1 align="center">Dependent Dropdown with Search Box using jQuery, Ajax, and PHP mysqli</h1>
<div class="row">
<div class="col-md-6">
<label>Select Car</label>
<select name="car_brand" data-live-search="true" id="car_brand" class="form-control" title="Select Car Brand"> </select>
</div>
<div class="col-md-6">
<label>Select Brand</label>
<select name="car_models" data-live-search="true" id="car_models" class="form-control" title="Select Car Model"> </select>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script>
$(document).ready(function () {
$("#car_brand").selectpicker();
$("#car_models").selectpicker();
load_data("carData");
function load_data(type, category_id = "") {
$.ajax({
url: "fetch.php",
method: "POST",
data: { type: type, category_id: category_id },
dataType: "json",
success: function (data) {
var html = "";
for (var count = 0; count < data.length; count++) {
html += '<option value="' + data[count].id + '">' + data[count].name + "</option>";
}
if (type == "carData") {
$("#car_brand").html(html);
$("#car_brand").selectpicker("refresh");
} else {
$("#car_models").html(html);
$("#car_models").selectpicker("refresh");
}
},
});
}
$(document).on("change", "#car_brand", function () {
var category_id = $("#car_brand").val();
load_data("carModeldata", category_id);
});
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
$conn = mysqli_connect("localhost", "root", "", "testingdb");
if (isset($_POST["type"])) {
if ($_POST["type"] == "carData") {
$sqlQuery = "SELECT * FROM carBrands ORDER BY brand_name ASC";
$resultset = mysqli_query($conn, $sqlQuery) or die("database error:". mysqli_error($conn));
while( $row = mysqli_fetch_array($resultset) ) {
$output[] = [
'id' => $row["brand_id"],
'name' => $row["brand_name"],
];
}
echo json_encode($output);
} else {
$sqlQuery2 = "SELECT * FROM carModels WHERE brand_id = '" . $_POST["category_id"] . "' ORDER BY car_models ASC";
$resultset2 = mysqli_query($conn, $sqlQuery2) or die("database error:". mysqli_error($conn));
while( $row2 = mysqli_fetch_array($resultset2) ) {
$output[] = [
'id' => $row2["model_id"],
'name' => $row2["car_models"],
];
}
echo json_encode($output);
}
}
?>
