原生JavaScript简单的静态搜索过滤文字(只支持中文，暂无拼音搜索)

效果介绍：在input输入框内，输入中文会自动检索匹配list里面所有包含此中文的item。

目前唯一的缺点是不支持拼音检索，在后期的文章里会加入相对于的效果，敬请期待！

html部分的代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< input type = "text" placeholder = '请输入文字开始筛选' id = 'input' / >          < ul id = "content" >                  < li >俄罗斯 < / li >                  < li >乌克兰 < / li >                  < li >巴西 < / li >                  < li >德国 < / li >                  < li >阿根廷 < / li >                  < li >荷兰 < / li >                  < li >英国 < / li >                  < li >美国 < / li >                  < li >澳大利亚 < / li >                  < li >中华民国 < / li >                  < li >中国 < / li >          < / ul >

css部分的代码：

1 2 3 4 5

#content{                          list - style : none ;                          padding : 0 ;                          margin : 0 ;                  }

JavaScript部分的代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//获取输入框的值                  var input = document . getElementById ( 'input' ) ,                                           //获取搜索内容                          list = document . getElementById ( 'content' ) . getElementsByTagName ( 'li' ) ;                                                   //编写事件                          try {                                                           //绑定按键事件                                  input . onkeyup = function ( ) {                                          this . onchange ( ) ;                                  } ;                                  //内容改变事件                                  input . onchange = function ( ) {                                          var keyword = this . value ;                                          for ( var i = 0 , len = list . length ; i < len ; i ++ ) {                                                  if ( list [ i ] . innerHTML . indexOf ( keyword ) < 0 ) {                                                          list [ i ] . style . display = 'none' ;                                                  } else {                                                          list [ i ] . style . display = 'block' ;                                                  }                                          }                                  }                          } catch ( ex ) {                                                   }

效果预览-》猛点这里