Searchable Multicolumn Select Dropdown using jQuery

In this tutorial we will see about searchable multi-column select dropdown using jQuery, allowing users to choose products with details like name, price, and unit of measure (UOM).

Demo :

How It Works

The user starts typing in the input field (#input_select).
The multicolumn dropdown table appears, displaying matching products.
When the user selects a product:
1. The product_id hidden input is updated with the selected product's id.
2. The #input_select field is updated with the selected product’s name.
The product list can be dynamically updated using updateData().

Create HTML File

This code creates a searchable multi-column dropdown using jQuery, allowing users to select products with details like name, price, and unit of measure. It initializes the dropdown with predefined data and provides functionality to update the product list dynamically.

multicolumn_dropdown.html

<html>
    <head>
        <title>Searchable Multicolumn Select Dropdown using jQuery</title>
        <!-- Link the multicolumn dropdown stylesheet -->
        <link rel='stylesheet' href='multicolumn_dropdown.css'>
    </head>
    <body>
        <h3>Searchable Multicolumn Select Dropdown using jQuery</h3>
        <div class="dropdown-container">
            <!-- hidden input for store 'id' of selected product -->
            <input type="hidden" name="product_id" id='product_id' class="hidden-input">
            <input type='text' class='multicolumn-input form-control form-control-sm' id='input_select'  name='product_name' >
            
            <div class="multicolumn-dropdown">            
                <table class="multicolumn-dropdown-table">
                    <thead>
                        <tr>
                            <th style="display:none;">id</th>
                            <th>Name</th>
                            <th>Price</th>
                            <th>UOM</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Link the jquery cdn -->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

        <!-- Link the multicolumn dropdown js file -->
        <script src='multicolumn_dropdown.js'></script>

        <script>

            // Initialize the plugin to generate a multicolumn dropdown.
            $('#input_select').multicolumnDropdown({
                data:[
                    {"id":1,"name":"Apple","price":250,"uom":"Kg"},
                    {"id":2,"name":"Mango","price":40,"uom":"Piece"},
                    {"id":3,"name":"orange","price":200,"uom":"Kg"},
                ],
            });
            
            //Update data
            $('#input_select').updateData([
                {"id":1,"name":"Pine Apple","price":150,"uom":"Kg"},
                {"id":2,"name":"Mango","price":40,"uom":"Piece"},
                {"id":3,"name":"orange","price":200,"uom":"Kg"},
            ]);
            
        </script>
    </body>
</html>

Try it Yourself

Create Style File

This CSS styles a searchable multi-column dropdown, ensuring a structured layout with a hidden input field, a styled dropdown, and a table with hover effects. It defines widths, borders, colors, and scrolling behavior to enhance usability and visual appeal.

multicolumn_dropdown.css

.dropdown-container{
    width:500px;
    position:relative;
}
.multicolumn-dropdown {
    position: absolute;
    min-width:500px;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index:100;
}
.multicolumn-input{
    width:100%;
    padding:5px;
}
.multicolumn-dropdown-table {
    width: 100%;
    border-collapse: collapse;
}    

.multicolumn-dropdown-table th{
    color: #70757a;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 12px !important;
    font-weight: 600;
    padding: 7px !important;
}

.multicolumn-dropdown-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 12px !important;
    font-weight: 500;
    padding: 7px !important;
}
.multicolumn-dropdown-table tbody tr:hover, .multicolumn-dropdown-table tbody tr.selected {
    background: #007bff!important;
    color: #fff!important;
    cursor: pointer;
}

.multicolumn-dropdown-table th:first-child, .multicolumn-dropdown-table td:first-child {
    display: none;
}

Create Script File

This jQuery plugin creates a searchable multi-column dropdown, allowing users to filter options, navigate with arrow keys, and select items dynamically. It also provides a method to update data and ensures the dropdown closes when clicking outside.

multicolumn_dropdown.js

(function ($) {

    $.fn.multicolumnDropdown = function (options) {
    
        var settings = $.extend({
            data: []
        }, options);
        
        this.each(function () {
        
            var $input = $(this);
            let selectedIndex = -1;
            let prevValue = "";
            let prevText = "";
            
            //Default input value & name
            var $hiddenInput = $input.siblings(".hidden-input");
            let $dropdown = $input.siblings(".multicolumn-dropdown");
            
            function showOptions() {            
                selectedIndex = -1;
                filterOptions();
                if($input.val() != ""){
                    prevValue = $hiddenInput.val();
                    prevText = $input.val();
                }
            }
            
            function filterOptions() {
            
                selectedIndex = -1;
                let value = $input.val().toLowerCase();
                let $tbody = $dropdown.find("tbody");
                $tbody.empty();
                $dropdown.show();
                
                var firstKey = Object.keys(settings.data[0])[0];
                var secondKey = Object.keys(settings.data[0])[1];
                let filtered = settings.data;
                
                if(value!=""){
                    filtered = settings.data.filter(item => item[secondKey].toLowerCase().includes(value));
                }
               
                if (filtered.length > 0) {
                    
                    filtered.forEach(item => {
                        let row ="<tr>";
                        Object.keys(item).forEach((key,index)=>{
                            row += "<td>"+item[key]+"</td>";
                        });
                        row+="</tr>";
                        let $row = $(row);
                        
                        $row.click(() => selectOption(item[firstKey], item[secondKey]));
                        $tbody.append($row);
                    }); 
                }
            }
            
            function handleKeyEvents(e) {
                
                let $rows = $dropdown.find("tbody tr");
                if ($rows.length === 0) return;
                 
                if (e.key === "ArrowDown") {
                    selectedIndex = (selectedIndex + 1) % $rows.length;
                } else if (e.key === "ArrowUp") {
                    selectedIndex = (selectedIndex - 1 + $rows.length) % $rows.length;
                } else if (e.key === "Enter" && selectedIndex >= 0) {
                    
                    let selectedRow = $rows.eq(selectedIndex);
                    selectOption(selectedRow.find("td").first().text(), selectedRow.find("td").eq(1).text());
                    e.preventDefault();
                    return;
                }
                
                $rows.removeClass("selected");
                if (selectedIndex >= 0) {
                    $rows.eq(selectedIndex).addClass("selected");
                }
            }
            
            function selectOption(id, value) {                
                $input.val(value);
                $hiddenInput.val(id);
                $dropdown.hide();
            }
            
            
            $input.on("input", filterOptions);
            $input.on("focus", showOptions);
            $input.on("keydown", handleKeyEvents);
            
            $input.on("blur", function() {
                if($input.val()==""){
                    $hiddenInput.val("");
                }else{
                    if(prevValue == $hiddenInput.val() && prevValue!=""){
                        $input.val(prevText);
                    }else if($hiddenInput.val() == ""){
                        $input.val("");
                    }
                }
            });
        });
        
        $.fn.updateData = function(newData) {
            if(!Array.isArray(newData)){
                newData = JSON.parse(newData);
            }
            settings.data = newData;
        };
    };
    

})(jQuery);

document.addEventListener("click", (e) => {
    document.querySelectorAll(".multicolumn-dropdown").forEach(dropdown => {
        if (!dropdown.parentElement.contains(e.target)) {
            dropdown.style.display = "none";
        }
    });
});