js实现页面数据的筛选

html:

<div class="wrapper">
   <div class="search">
       <input type="text" class = "search_box" placeholder = "请输入用户名">
       <p>
           <span sex = "m">Male</span>
           <span sex = "f">Female</span>
           <span sex = "a" class = "active">All</span>
       </p>
   </div>
   <div class="userList">
       <!-- 选项动态生成 -->
       <ul></ul>
   </div>
</div>

css：

*{
    margin:0;
    padding:0;
}
.wrapper{
    width:500px;
    margin:100px auto