Autocomplete Table

Autocomplete Table

by AndrewBuntsev

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<input type="text" id="search-bar" placeholder="Name"  />

CSS

.autocompleteMenuContainer {
            margin: 30px;
            padding: 0;
            width: 97%;
            max-height: 15em;
            border: 1px solid #dee2e6;
        }

        .autocompleteMenuHeader {
            background-color: #003866;
            color: white;
            position: fixed;
            width: 95%;
        }

        .autocompleteItemContainer {
            display: grid;
            grid-template-columns: 1fr 2fr 2fr;
            grid-column-gap: 2px;
        }

        .autocompleteHeaderItemContainer {
            display: grid;
            grid-template-columns: 1fr 2fr 2fr;
            grid-column-gap: 0;
        }

        .autocompleteItemFirstItem {
            margin-top: 20px;
        }

        .autocompleteMenuItemHeader {
            font-weight: 900;
            user-select: none;
            pointer-events: none;
            background-color: #003866 !important;
            color: white !important;
            padding: 2px !important;
            text-align: center;
        }

        .autocompleteIdColumn {
            grid-column: 1;
            padding: 2px;
        }

        .autocompleteNameColumn {
            grid-column: 2;
            padding: 2px;
        }

        .autocompleteEmailColumn {
            grid-column: 3;
            padding: 2px;
        }

        .ui-autocomplete li {
            border: none;
            border-top: 1px solid #dee2e6;
            text-align: center;
        }

JavaScript

//Update autocomplete behaviour
            $.widget("ui.autocomplete",
                $.ui.autocomplete,
                {
                    _renderItem: function(ul, item) {
                        if (item.isHeader) {
                            var $header = $("<li>")
                                .addClass('autocompleteHeaderItemContainer autocompleteMenuHeader')
                                .append($("<div>").addClass('autocompleteIdColumn autocompleteMenuItemHeader').text('Id'))
                                .append($("<div>").addClass('autocompleteNameColumn autocompleteMenuItemHeader').text('Name'))
                                .append($("<div>").addClass('autocompleteEmailColumn autocompleteMenuItemHeader').text('Email'))
                                .appendTo(ul);
                            $header.click(function() {
                                return false;
                            });
                            $header.mouseover(function() {
                                return false;
                            });
                            
                            return $header;
                        }
                        var $item = $("<li>")
                            .attr("data-value", item.value)
                            .addClass('autocompleteItemContainer')
                            .append($("<div>").addClass('autocompleteIdColumn').text(item.id))
                            .append($("<div>").addClass('autocompleteNameColumn').text(item.name).attr("title", item.name))
                            .append($("<div>").addClass('autocompleteEmailColumn').text(item.email).attr("title", item.email))
                            .appendTo(ul);
                        if (item.isFirstItem) {
                            $item.addClass('autocompleteItemFirstItem');
                        }
                        return $item;

                    },
                    _renderMenu: function(ul, items) {
...