JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<input type="text" name="parkingSearchField" id="parkingSearchField" value="" placeholder="Zone, address or landmark" data-role="none">
<br><br>
<div id="selectedItem"></div>
<div id="autocompleteListViewContainer"></div>

CSS

/* http://browsershots.org/http://fiddle.jshell.net/gerst20051/kr87jt5g/show/ */

body {
    background-color: #e0e0e0;
    overflow-y: scroll;
    text-align: center;
}

#parkingSearchField {
    -webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    padding: 20px;
    width: 500px;
}

#selectedItem {
    margin-top: 20px;
}

#autocompleteListViewContainer dl {
    -webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
    margin: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#autocompleteListViewContainer dt,
#autocompleteListViewContainer dd {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#autocompleteListViewContainer dt {
    background-color: #ccc;
    height: 20px;
    padding: 10px;
}

#autocompleteListViewContainer dd {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 20px;
    height: 50px;
    margin-left: 0;
    position: relative;
}

#autocompleteListViewContainer dd.autocompleteListViewItemNoBorder {
    border-bottom: 0;
}

#autocompleteListViewContainer dd:hover {
    background-color: #e0e0e0;
}

.autocompleteListViewItemImage {
    height: 25px;
    left: 15px;
    position: absolute;
    top: 12.5px;
    width: 25px;
}

.autocompleteListViewItemText {
    height: 50px;
    left: 55px;
    line-height: 50px;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 500px;
}

JavaScript

var autocompleteListViewHeaderHeight = 40;
var autocompleteListViewRowHeight = 50;

var UIListView = function () {
    this.globalIdCounter = 0;
	this.sections = [];
    this.selector = '';

	this.config = function (selector) {
		this.selector = selector;
        this.setListeners();
		return this;
	};
    
    this.generateID = (function () {
        return function () {
            return this.selector.slice(1) + this.globalIdCounter++;
        };
    })();

	this.display = function () {
		this.refresh();
	};

	this.refresh = function () {
		this.printListView();
	};
};

UIListView.prototype.clear = function () {
	this.sections = [];
};

UIListView.prototype.setListeners = function () {
    var self = this;
	$(this.selector).on('click', 'dd', function () {
        self.findItem($(this).attr('id'), $(this).prevAll('dt').first().attr('id')).callCallback($(this).text());
    });
};

UIListView.prototype.getSectionCount = function () {
    var enabledSectionsCount = 0;
    this.sections.forEach(function (section) {
        if (section.isEnabled()) {
            enabledSectionsCount++;
        }
    });
    return enabledSectionsCount;
};

UIListView.prototype.getSections = function () {
    return this.sections;
};

UIListView.prototype.getSection = function (index) {
    var enabledSectionsCount = 0;
    for (var i = 0; i < this.sections.length; i++) {
        if (this.sections[i].isEnabled()) {
            if (enabledSectionsCount === index) {
                return this.sections[i];
            }
            enabledSectionsCount++;
        }
    }
};

UIListView.prototype.findSection = function (id) {
    for (var i = 0; i < this.sections.length; i++) {
        if (this.sections[i].isEnabled() && this.sections[i].getId() === id) {
            return this.sections[i];
        }
    }
};

UIListView.prototype.findItem = function (itemId, sectionId) {
    return this.findSection(sectionId).findItem(itemId);
};

UIListView.prototype.addSection = function (section)...