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

我必须使用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>

搜索：
我的数据列表


首先
第二次
15
世界

我试过了，但没有得到当前的解决方案。 这是我的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();

var搜索器={
ul:document.getElementById（'list'），
li:document.getElementById（'list'）.children，
备份：[]，
搜索列表：[]，
显示列表：功能（eventObj）{
var userInput=eventObj.target.value；
console.log（userInput）；console.log（this.backup）；
var search=this.getRequired（userInput，this.backup）；
var listToDisplay=this.textListToHtmlArray（搜索）；
},
fillBackup:function（）{
var length=this.li.length；
对于（变量i=0；i

---

请帮我找到解决办法。我对你们大家都很高兴：我尝试了很多次，但根本没有得到需要的答案。

您的问题在正则表达式中，您没有在

中编写正则表达式
（var reg=new RegExp（'\\n'+pinder，'i'）；。您必须使用var reg=new RegExp（'\\b'+pinder，'i'）；

var搜索器={
ul:document.getElementById（'list'），
li:document.getElementById（'list'）.children，
备份：[]，
搜索列表：[]，
显示列表：功能（eventObj）{
var userInput=eventObj.target.value；
console.log（userInput）；console.log（this.backup）；
var search=this.getRequired（userInput，this.backup）；
var listToDisplay=this.textListToHtmlArray（搜索）；
console.log（listToDisplay）；
},
fillBackup:function（）{
var length=this.li.length；
对于（变量i=0；i

 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;
        }
    },
    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++ ){
            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();
        console.log( this.ul );
        console.log( this.li );
        console.log( this.backup );
        search.onkeyup = this.showList.bind( this );
    }
};

console.log( searcher.li );
searcher.init();