JSFiddle - React, Tailwind, and code Playground

by belorion

HTML

<input type="text" id="el"  value="" />

JavaScript

var isArray = Array.isArray || (function () {
    var class2type = {};
    var arr = "Boolean Number String Function Array Date RegExp Object".split(" ");
    for (var i = 0, length = arr.length; i < length; i++) {
        var name = arr[i];
        class2type["[object " + name + "]"] = name.toLowerCase();
    }

    var typeFunc = function (obj) { return obj == null ? String(obj) : class2type[Object.prototype.toString.call(obj)] || "object" };
    return function (obj) { return typeFunc(obj) === "array" };
})();

var InlineAutoComplete = (function(){
    var inlineAutoComplete = function(target, data){
        var self = this;
        var element = document.getElementById(target);
        
        var onBlur = function(){
            element.setSelectionRange();
        };
        
        var onKeyPress = function(e){
            var keyCode = e.keyCode;
            if(keyCode < 48 || keyCode > 90){ return; }
            
            var text = element.value;
            var length = text.length;
            var newValue = self.findMatch(text);
            
            element.value = newValue;
            element.setSelectionRange(length, newValue.length);
        };
        
        this.findMatch = function(subtext){
            if(isArray(data)){ return findMatchArr(subtext); }
            return findMatchObj(subtext);
        };
        
        var findMatchArr = function(subtext){
            var sublength = subtext.length;
            var textAsLower = subtext.toLowerCase();
            for(var i = 0; i < data.length; i++){
                var otherAsLower = data[i].toLowerCase();
                if(textAsLower === otherAsLower.slice(0, sublength)){
                    return data[i];   
                }
            }
            
            return subtext;
        };
        
        var findMatchObj = function(subtext){
            var sublength = subtext.length;
            var textAsLower = subtext.toLowerCase();
            for(var other in...