当搜索成功后搜索文本框为空时，不会提取所有数据列表

我必须使用javascript执行客户端搜索，我可以这样做，但我无法在搜索文本后获得所有数据列表

这是我的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>
    </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( '''n' + 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++ ){
            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 = document.getElementById( 'search' );
        this.fillBackup();
        search.onkeyup = this.showList.bind( this );
    }
};
searcher.init();

请帮我找到解决方案。我对你们都很高兴：我试了很多次，但都没有得到需要的答案。