Select dropdown with search box using Dselect & PHP

Bootstrap 5 select dropdown using dselect to search through the dropdown.

Database

countries.sql

There is the schema for the table.

    CREATE TABLE `countries` (
        `id` int(11) NOT NULL AUTO_INCREMENT,
        `country_code` varchar(2) NOT NULL DEFAULT '',
        `country_name` varchar(100) NOT NULL DEFAULT '',
        PRIMARY KEY (`id`)
    ) ENGINE=MyISAM AUTO_INCREMENT=246 DEFAULT CHARSET=utf8;

Config parameters

const config = {
    search: false, // Toggle search feature. Default: false
    creatable: false, // Creatable selection. Default: false
    clearable: false, // Clearable selection. Default: false
    maxHeight: '360px', // Max height for showing scrollbar. Default: 500px
    size: '', // Can be "sm" or "lg". Default ''
}

dselect(document.querySelector('#select_box'), config)

or like this:

    dselect(select_box_element, {
        search: true,
        creatable: false,
        maxHeight: '360px'
    });

Parameters can also be set in "data-dselect-*" attribute:

    <select data-dselect-search="true" data-dselect-creatable="true" data-dselect-clearable="true" data-dselect-max-height="500px" data-dselect-size="lg" class="form-select" id="select_box">
        <option value="">Select country</option>
    </select>