html+css3+jQuery搜索框过滤筛选信息列表

1、新救醒建html文档。

2、新建html文档。

<h1>jQuery搜索框过滤筛选</h1>

<section class="list-wrap"薪码>

  <label for="search-text">搜索列表内容</label>

  <input type="text" id="search-text" placeholder="美食大搜低祝倘索" class="search-box">

  <span class="list-count"></span>

<ul id="list">

 <li class="in">苹果派</li>

 <li class="in">南瓜派</li>

 <li class="in">香蕉奶油派</li>

 <li class="in">桃黑莓馅饼</li>

 <li class="in">巧克力草莓蛋糕</li>

 <li class="in">巧克力南瓜蛋糕</li>

 <li class="in">巧克力和薄荷控</li>

 <li class="in">红丝绒蛋糕</li>

 <li class="in">非水果樱桃</li>

 <span class="empty-item">无数据</span>

</ul>

</section>

3、书写css代码。

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.list-wrap label { float: left; color: #555; }

.search-box { float: left; clear: left; width: 70%; padding: 0.4em; font-size: 1em; color: #555; border: 1px solid #00BDE8; border-radius: 3px; }

.list-count { float: left; text-align: center; width: 30%; padding: 0.5em; color: #ddd; }

li { transition-property: margin, background-color, border-color; transition-duration: .4s, .2s, .2s; transition-timing-function: ease-in-out, ease, ease; }

.empty-item { transition-property: opacity; transition-duration: 0s; transition-delay: 0s; transition-timing-function: ease; }

.empty .empty-item { transition-property: opacity; transition-duration: .2s; transition-delay: .3s; transition-timing-function: ease; }

.hiding { margin-left: -100%; opacity: 0.5; }

.hidden { display: none; }

ul { float: left; width: 100%; margin: 2em 0; padding: 0; position: relative; }

ul:before { content: '美食美客'; position: absolute; left: -2.8em; font-size: 2em; text-align: right; top: 1.5em; color: #ededed; font-weight: bold; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; transform: rotate(-90deg); }

li { float: left; clear: left; width: 100%; margin: 0.2em 0; padding: 0.5em 0.8em; list-style: none; background-color: #f2f2f2; border-left: 5px solid #003842; cursor: pointer; color: #333; position: relative; z-index: 2; }

li:hover { background-color: #f9f9f9; border-color: #00BDE8; }

.empty-item { background: #fff; color: #ddd; margin: 0.2em 0; padding: 0.5em 0.8em; font-style: italic; border: none; text-align: center; visibility: hidden; opacity: 0; float: left; clear: left; width: 100%; }

.empty .empty-item { opacity: 1; visibility: visible; }

/*

The following are styles purely for the surroundings

*/

body { background-color: #fff; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; margin: 0; padding: 0; font-size: 1em; }

a { color: #00BDE8; }

h1 { font-size: 2em; margin: 0; padding-top: 1.5em; text-align: center; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; }

h3 { margin: 0 0 2em; text-align: center; font-weight: normal; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-style: italic; color: #777; font-size: 1em; }

.list-wrap { float: left; width: 40%; margin: 2em 30%; padding: 2em 0; }

4、书写并添加js代码。

<script src='js/jquery.min.js'></script> 

<script>$(document).ready(function() {

  var jobCount = $('#list .in').length;

  $('.list-count').text('共 ' + jobCount + ' 条');  

  $("#search-text").keyup(function () {

    var searchTerm = $("#search-text").val();

    var listItem = $('#list').children('li');

    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

  $.extend($.expr[':'], {

  'containsi': function(elem, i, match, array)

  {

    return (elem.textContent || elem.innerText || '').toLowerCase()

    .indexOf((match[3] || "").toLowerCase()) >= 0;

  }

});

    $("#list li").not(":containsi('" + searchSplit + "')").each(function(e)   {

      $(this).addClass('hiding out').removeClass('in');

      setTimeout(function() {

          $('.out').addClass('hidden');

        }, 300);

    });

        $("#list li:containsi('" + searchSplit + "')").each(function(e) {

      $(this).removeClass('hidden out').addClass('in');

      setTimeout(function() {

          $('.in').removeClass('hiding');

        }, 1);

    });   

      var jobCount = $('#list .in').length;

    $('.list-count').text('共 ' + jobCount + ' 条');

    if(jobCount == '0') {

      $('#list').addClass('empty');

    }

    else {

      $('#list').removeClass('empty');

    }    

  });

});</script>

5、代码整体结构。

6、查看效果。