jQuery - Show Searched List

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

$.fn.searchedList = function( options ){
    var self = this;
    var defaults = { searchId: '#search', listId: this.selector };
    var setting = $.extend( {}, defaults, options );
    var backup = [];
    var backupHtml = [];
    var required = [];
    var changingBackup = [];
    
    function findDeepestChild(parent) {
        var result = {depth: 0, element: parent};
    
        parent.children().each(
            function(idx) {
                var child = $(this);
                var childResult = findDeepestChild(child);
                if (childResult.depth + 1 > result.depth) {
                    result = {
                        depth: 1 + childResult.depth, 
                        element: childResult.element};
                }
            }
        );
        return result;
    }
    function fillBackup( list ){
        var length = list.length;
        for( var i = 0; i < length; i++ ){
            //this.backup[i] = this.li[i].innerHTML;
            backup[i] = findDeepestChild($(list[i]))['element'][0].innerHTML;
        }
        return backup;
    }
    function getRequired( needle, haystack ){
        var reg = new RegExp( '(\\b' + needle + ')', 'i' );
        var length = haystack.length;
        required = [];
        // filter required array
        if( needle.length !== 0 ){
            for( var i = 0; i < length; i++ ){
                if ( reg.test(haystack[i]) ) {
                    required[i] = haystack[i].replace(reg, '<b>$1</b>' );
                    //required[i] = haystack[i];
                }
            }
            return required;
        }
        else {
            return haystack;
        }
    }
    function textListToHtmlArray( list ){
        var htmlList = [];
        changingBackup.each(function(index, value){
            console.log( index );
            if( list[index] ){
                findDeepestChild($(value))['element'][0].innerHTML = list[index];
                console.log(...