JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<input type="text" id="colorSelectHolder1" class="colorSearch colorSelectHolder" value="" onClick="colorSelectHolderHandler(this.id)" onKeyUp="handleUserTextInput(this.value)">
<div id="colorSelectHolder1-placeHolder" class="selectBoxPlaceHolder hidden">
    <select id="colorSelectHolder1-placeHolder-select" name="select"></select>
</div>
<div id="liveText"></div>

JavaScript

var colorData = {
    "0": {
        "color_name": "red",
            "color_id": "1"
    },
        "1": {
        "color_name": "blue",
            "color_id": "2"
    },
        "2": {
        "color_name": "green",
            "color_id": "3"
    },
        "3": {
        "color_name": "purple",
            "color_id": "4"
    }
};

function dataToArrayByKey(keyName, data) {
    var dataTextArray = [];
    for (var i = 0; i < Object.keys(data).length; i++) {
        var key = Object.keys(data)[i];
        dataTextArray = dataTextArray.push(data[key]);
    }
    return dataTextArray;
}

function getMatchByKeyword(searchTerm, searchData) {
    var searchTermRegEx = new RegExp(searchTerm);
    var matchingKey = '';
    for (var i = 0; i < Object.keys(searchData).length; i++) {
        var key = Object.keys(searchData)[i];
        var searchResult = searchTermRegEx.test(searchData[key]);
        if (searchResult) {
            matchingKey = key;
        }
    }
    return matchingKey;
}

function handleUserTextInput(inputText) {
    console.log(inputText);
    var searchData = dataToArrayByKey('color_name', colorData);
    var selectedItem = '';
    selectedItem = getMatchByKeyword(inputText, searchData);
    if (selectedItem !== '') {
        //handle when matching
        var liveText = document.getElementById('liveText');
        liveText.innerHTML = data[searchMatch].color_name;
    }
}

function appendDropDownOption(item, key, placeHolderID) {
    var select = document.getElementById(placeHolderID + '-select');
    var option = document.createElement('option');
    option.text = item.color_name;
    option.value = key;
    select.add(option, key);
}

function generateDropDown(placeHolderID) {
    for (var i = 0; i < Object.keys(colorData).length; i++) {
        var key = Object.keys(colorData)[i];
        appendDropDownOption(colorData[key], key, placeHolderID);
    }
}

function addSelectDropdown(placeHolderID) {
    generateDropDown(placeHolderID);
   ...