JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<input type="text" />
<p>Suspendisse potenti. Fusce pharetra convallis urna. Praesent ac sem eget est egestas volutpat. Suspendisse non nisl sit amet velit hendrerit rutrum. Quisque id odio.</p>
<input type="text" />

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800,300);
body{
    font-family: 'Raleway', sans-serif;
}
* {
    box-sizing: border-box;
}
input[type="text"] {
    width: 100%;
    display: block;
    font-family:'Raleway', sans-serif;
    font-size: 16px;
    padding: 8px 5px;
}
.autofill-wrap {
    position: relative;
}
ul.autofill-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    font-family:'Raleway', sans-serif;
    font-weight: 700;
    visibility: hidden;
    opacity: 0;
    transition: visibility 300ms, opacity 300ms;
}
.autofill-wrap input:focus ~ ul.autofill-suggestions {
    opacity: 1;
    visibility: visible;
}
ul.autofill-suggestions > li {
    position: relative;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 3px 5px;
}
ul.autofill-suggestions > li.autofill-selected, ul.autofill-suggestions > li:hover {
    background-color: #ddd;
}

JavaScript

/**
 * Weighted autocomplete
 */
 
var autocomplete = function (elem, pool, displayResults, minimumWeight) {
    if (elem.tagName != 'input' && elem.getAttribute('type') != 'text') {
        return;
    }

    var _t = this;

    _t.pool = [];
    if (typeof pool === 'object') {
        _t.pool = pool;
    }

    _t.displayResults = displayResults || 3;
    _t.minimumWeight = minimumWeight || 1.1;

    /**
     * DOM SETUP
     */
    // Wrap element
    var inputWrap = document.createElement('div');
    inputWrap.setAttribute('class', 'autofill-wrap');
    inputWrap.innerHTML = elem.outerHTML;
    elem.parentNode.insertBefore(inputWrap, elem.nextSibling);

    // Retarget
    var thisInput = elem.nextSibling;
    thisInput = thisInput.children[0];

    // Remove
    elem.parentNode.removeChild(elem);
    elem = thisInput;

    // Insert suggestion container
    var suggestionsContainer = document.createElement('ul');
    suggestionsContainer.setAttribute('class', 'autofill-suggestions');
    elem.parentNode.insertBefore(suggestionsContainer, elem.nextSibling);

    // Set up references
    _t.lastInput = elem.value;
    _t.matches = [];
    _t.lastSelection = 0;

    /**
     * BIND
     */
    // Prevent home/end equivalent events on up/down
    elem.addEventListener('keydown', function (e) {
        var k = e.charCode || e.keyCode;
        if (k == 38 || k == 40) {
            e.preventDefault();
        }
    });

    // Look for matches on keyup
    elem.addEventListener('keyup', function (e) {
        // Handle up/down/return events
        var k = e.charCode || e.keyCode;

        // Up
        if (k == 38) {
            _t.prevMatch();
            return false;
        }

        // Down
        if (k == 40) {
            _t.nextMatch();
            return false;
        }

        // Return
        if (k == 13) {
            /*
      // Check if selecting suggestion
      var match = elem.nextSibling.querySelectorAll('.autofill-selected')[0];
     ...