Show Searched List

From available list of data, display the items that matches the one on the search field.

by Subigya Panta

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"><a href="#">First</a></li>
        <li class="test">Second</li>
        <li class="test">Hello Alfred</li>
        <li class="test">World</li>
        <li class="test">Female</li>
        <li class="test">GoodBye</li>
        <li class="test">Bullet For My Valentine</li>
        <li class="test">Mate</li>
        <li class="test">Swiss Airlines</li>
        <li class="test">Helmet</li>
        <li class="test">God</li>
        <li class="test">Age of Empires</li>
    </ul>
</div>

CSS

#list{
    list-style: none;
    padding: 5px 10px 15px 20px;
    color: #888;
}
#list li{
    padding: 5px;
    border-bottom: 1px solid #ddd;
}
#list li:hover{
    color: #444;
    cursor: pointer;
}

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 );
        
        console.log( listToDisplay );        
    },
    fillBackup: function(){
        var length = this.li.length;
        for( var i = 0; i < length; i++ ){
            //this.backup[i] = this.li[i].innerHTML;
            this.backup[i] = getDeepestChildData( this.li[i] );
        }
    },
    getRequired: function( needle, haystack ){
        var reg = new RegExp( '\\b' + needle, 'i' );
        var i = 0, j = 0, length = haystack.length;
        this.searchList = [];
        // filter required array
        if( needle.length !== 0 ){
            for( i = 0; i < length; 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++ ){
            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 self = this;
        var search = document.getElementById( 'search' );
       ...