July 6, 2020

Search Box Cascading Dependent Dropdown With jQuery, Ajax, and PHP

In this article, we going to see Search box cascading dependent dropdown with jQuery, Ajax, and PHP. Users always love a quick search interface dropdown because that allows users to search what they like. Based on that here we used Bootstrap select dropdown with a search box option. Here I created car brands with models you can modify as per your requirement. The below code will work based on a car brand search select with models.

Database with car brand and model names

--
-- Database: `dropdown_search`
--

-- --------------------------------------------------------

--
-- 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, 'Jaguar'),
(2, 'Tesla'),
(3, 'Tata'),
(4, 'Maserati'),
(5, 'Volvo');

-- --------------------------------------------------------

--
-- 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, 'XJ L'),
(2, 2, 'Model S'),
(3, 1, 'XE'),
(4, 1, 'F-TYPE'),
(5, 1, 'XF'),
(6, 1, 'I-Pace'),
(7, 2, 'Model 3'),
(8, 2, 'Model X'),
(9, 3, 'Altroz'),
(10, 3, 'Harrier'),
(11, 3, 'Nexon'),
(12, 3, 'Nexon EV'),
(13, 4, 'Quattroporte'),
(14, 4, 'GranTurismo'),
(15, 4, 'Levante'),
(16, 4, 'Ghibli'),
(17, 4, 'GranCabrio'),
(18, 5, 'XC90'),
(19, 5, 'XC40'),
(20, 5, 'XC60'),
(21, 5, 'S90');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `carBrands`
--
ALTER TABLE `carBrands`
  ADD PRIMARY KEY (`brand_id`);

--
-- Indexes for table `carModels`
--
ALTER TABLE `carModels`
  ADD PRIMARY KEY (`model_id`),
  ADD KEY `industry_id` (`brand_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `carBrands`
--
ALTER TABLE `carBrands`
  MODIFY `brand_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

--
-- AUTO_INCREMENT for table `carModels`
--
ALTER TABLE `carModels`
  MODIFY `model_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4435;
COMMIT;

-- Database: `dropdown_search`

-- --------------------------------------------------------

-- 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, 'Jaguar'),

(2, 'Tesla'),

(3, 'Tata'),

(4, 'Maserati'),

(5, 'Volvo');

-- --------------------------------------------------------

-- 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, 'XJ L'),

(2, 2, 'Model S'),

(3, 1, 'XE'),

(4, 1, 'F-TYPE'),

(5, 1, 'XF'),

(6, 1, 'I-Pace'),

(7, 2, 'Model 3'),

(8, 2, 'Model X'),

(9, 3, 'Altroz'),

(10, 3, 'Harrier'),

(11, 3, 'Nexon'),

(12, 3, 'Nexon EV'),

(13, 4, 'Quattroporte'),

(14, 4, 'GranTurismo'),

(15, 4, 'Levante'),

(16, 4, 'Ghibli'),

(17, 4, 'GranCabrio'),

(18, 5, 'XC90'),

(19, 5, 'XC40'),

(20, 5, 'XC60'),

(21, 5, 'S90');

-- Indexes for dumped tables

-- Indexes for table `carBrands`

ALTER TABLE `carBrands`

ADD PRIMARY KEY (`brand_id`);

-- Indexes for table `carModels`

ALTER TABLE `carModels`

ADD PRIMARY KEY (`model_id`),

ADD KEY `industry_id` (`brand_id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `carBrands`

ALTER TABLE `carBrands`

MODIFY `brand_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

-- AUTO_INCREMENT for table `carModels`

ALTER TABLE `carModels`

MODIFY `model_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4435;

COMMIT;

index.php

In the below index.php we used Bootstrap and Bootstrap Select along with Ajax and jQuery fetching the data through PHP from the database.

<!DOCTYPE html>
<html>
    <head>
        <title>Search Box Cascading Dependent Dropdown With jQuery, Ajax, and PHP</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">Search Box Cascading Dependent Dropdown With jQuery, Ajax, and PHP</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 Model</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>

<!DOCTYPE html>

<html>

<head>

<title>Search Box Cascading Dependent Dropdown With jQuery, Ajax, and PHP</title>

</head>

<body>

<h1 align="center">Search Box Cascading Dependent Dropdown With jQuery, Ajax, and PHP</h1>

<label>Select Car</label>

</div>

<label>Select Model</label>

</div>

$(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

Using fetch.php we going to fetch the data from the database and if the user data match with the car brand then the relevant brand model will display on another select box.

<?php
//DB Connection
$conn = new PDO("mysql:host=localhost;dbname=dropdown_search", "root", "");

if (isset($_POST["type"])) {
    if ($_POST["type"] == "carData") {
        $query = "
        SELECT * FROM carBrands ORDER BY brand_name ASC";
        $statement = $conn->prepare($query);
        $statement->execute();
        $data = $statement->fetchAll();
        foreach ($data as $row) {
            $output[] = [
                'id' => $row["brand_id"],
                'name' => $row["brand_name"],
            ];
        }
        echo json_encode($output);
    } else {
        $query =
            "
            SELECT * FROM carModels WHERE brand_id = '" .
            $_POST["category_id"] .
            "' ORDER BY car_models ASC";
        $statement = $conn->prepare($query);
        $statement->execute();
        $data = $statement->fetchAll();
        foreach ($data as $row) {
            $output[] = [
                'id' => $row["model_id"],
                'name' => $row["car_models"],
            ];
        }
        echo json_encode($output);
    }
}

?>

<?php

//DB Connection

$conn = new PDO("mysql:host=localhost;dbname=dropdown_search", "root", "");

if (isset($_POST["type"])) {

if ($_POST["type"] == "carData") {

$query = "

SELECT * FROM carBrands ORDER BY brand_name ASC";

$statement = $conn->prepare($query);

$statement->execute();

$data = $statement->fetchAll();

foreach ($data as $row) {

$output[] = [

'id' => $row["brand_id"],

'name' => $row["brand_name"],

];

}

echo json_encode($output);

} else {

$query =

SELECT * FROM carModels WHERE brand_id = '" .

$_POST["category_id"] .

"' ORDER BY car_models ASC";

$statement = $conn->prepare($query);

$statement->execute();

$data = $statement->fetchAll();

foreach ($data as $row) {

$output[] = [

'id' => $row["model_id"],

'name' => $row["car_models"],

];

}

echo json_encode($output);

}

Conclusion:

I hope this article will help you to do a search box cascading dependent dropdown with jQuery, Ajax, and PHP. If you have any doubts about this topic let me know in the comment section and if you loved this article share it with your friends.

Preview & Download

Cascading Dropdown Dependent Dropdown Dropdown Search Box Cascading

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Search Box Cascading Dependent Dropdown With jQuery, Ajax, and PHP

Share:

Preview & Download

Mraj

Don't miss on latest updates