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-bo旌忭檀挢x-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、查看效果。
