JSFiddle - React, Tailwind, and code Playground

by happysmiles

HTML

<form>
    <label for="search">Search: </label>
    <input type="text" name="search" id="search"/>
</form>
<div id="new-list">
    <p><b>My List of Data</b></p>
    <ul id="list">
        <li class="test">First</li>
        <li class="test">Second</li>
        <li class="test">fifteen</li>
        <li class="test">World</li>
        <li class="test">Da vici</li>
        <li class="test">Third</li>
    </ul>
</div>

JavaScript

var searcher = {
    ul         : document.getElementById( 'list' ),
    li         : document.getElementById( 'list' ).children,
    backup     : [],
    searchList : [],
    showList : function ( eventObj ){
        var userInput = eventObj.target.value;
        console.log( userInput );
        console.log( this.backup );
        var search = this.getRequired( userInput, this.backup );
        var listToDisplay = this.textListToHtmlArray( search );     
    },
    fillBackup: function(){
        var length = this.li.length;
        for( var i = 0; i < length; i++ ){
            this.backup[i] = this.li[i].innerHTML;
        }
    },
    getRequired: function( needle, haystack ){
        var reg = new RegExp( '.*' + needle + '.*', 'i' ); // Changed the REGEX
        var i = 0, j = 0, length = haystack.length;
        this.searchList = [];
        // filter required array
        console.log(reg);
                
        if( needle.length !== 0 ){
            for( i = 0; i < length; i++ ){
                console.log(haystack[i]);
                console.log(reg.test(haystack[i]));
                if ( reg.test(haystack[i]) ) {
                    this.searchList.push( haystack[i] );
                }
            }
            return this.searchList;
        }
        else {
            return haystack;
        }
    },
    textListToHtmlArray: function( list ){
        //clear the current list
        while( this.ul.firstChild ){
            this.ul.removeChild( this.ul.firstChild );
        }
        console.log( this.ul );
        var htmlList, listText;
        for( var i = 0; i < list.length; i++ ){
            var htmlList = document.createElement( 'li' );
            htmlList.setAttribute( 'class', 'test' );
            listText = document.createTextNode( list[i]);
            htmlList.appendChild( listText );
            this.ul.appendChild( htmlList );
        }
        return htmlList;
    },
    init : function (){
        var search =...