Typeahead

by TheoI

HTML

<div class="input-container">
    <input class="back" />
    <input class="front" />
</div>

CSS

.input-container {
  position: relative;
  width: 50%;
}

input {
  position: absolute;
    width: 17px;
    padding: 5px 10px;
}
.front {
    background-color: transparent;
}
.back {
    color: grey;
}

JavaScript

var back, front, lastValue;

var options = [
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
]



var update = function () {
    back.value = "";
    if (front.value !== "") {
    for (var optionNo in options) {
        var option = options[optionNo];
        if (option.indexOf(front.value) === 0) {
            back.value = option;
            console.log(option);
            break;
        }
    }
}
    if(lastValue < front.scrollWidth) {
        back.style.visibility = "hidden";
    } else if (lastValue === front.scrollWidth) {
        back.style.visibility = "visible";
    }
    lastValue = front.scrollWidth;
};

document.addEventListener('DOMContentLoaded', function() {
  back = document.querySelector('input.back');
  front = document.querySelector('input.front');
    lastValue = front.scrollWidth;
  
  front.addEventListener('input', update);
    var focusedVisibility = back.style.visible;
    front.addEventListener('focus', function () {
        back.style.visible = focusedVisibility;
    });
    front.addEventListener('blur', function () {
        focusedVisibility = back.style.visible;
        back.style.visibility = "hidden";
    });
});