我必须使用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();
请帮助我找到解决方案。我很高兴你们所有人:我尝试了很多次尝试但很冷却根本不需要回答。
答案 0 :(得分:0)
你的问题在正则表达式中,你没有在
( var reg = new RegExp( '\\n' + needle, 'i' ); .Instead of this you have to use var reg = new RegExp( '\\b' + needle, '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();